0

ワイヤーフレームや Visio タイプのアプリに似たインターフェイスを作成したいと考えています。たとえば、ウィンドウの横に、メイン キャンバスにドラッグできる形状や画像などを含むツールボックスを作成します。

JQuery UI の場合、ツールボックスの形状はヘルパーになります。オブジェクトをキャンバスにドラッグしたら、マウス ボタンを離した位置にドロップする必要があります。これを行った後でも、クローンを自由にドラッグできます。

これを行う方法がわかりません。これが私のコードです...

<script>
    $(function() {
        $( "#container").droppable(
            {
    drop: function(event, ui) {
        $(this).append($(ui.draggable).clone());
    }
}
        );
    $( ".draggable" ).draggable({ 
            containment: "window", 
            stack: ".draggable", 
            helper: "clone",
            revert: "invalid"   

        });

    });

したがって、これは現在 #container div にドロップされますが、各クローンは自動的に左側にスタックされます。その後、クローンをドラッグできなくなりました。

4

1 に答える 1

2

ここに出発点があります：フィドル

しかし、これは非常に一般的な解決策であるため、より具体的な使用例がある場合はお知らせください。

.js

$("#container").droppable({
  // accept draggables only from #toolbox,
  // this will prevent cloning of the draggables(inside drop event handler),
  //  that already have been dropped inside #container
  accept: "#toolbox .draggable",
  drop: function (event, ui) {
      // when a draggable is dropped: 
      // 1: clone it's helper 
      // 2: Make the helper draggable
      // 3: set containment to #container
      $(this).append($(ui.helper).clone().draggable({
          containment: "parent"
      }));
  }
});
$(".draggable").draggable({
  revert: "invalid",
  helper: "clone"
});

.html

<div id="toolbox">
<div class="draggable">drag</div>
<div class="draggable">drag</div>
<div class="draggable">drag</div>
<div class="draggable">drag</div>
</div>
<div id="container"></div>
于 2013-07-01T20:43:13.193 に答える