Draggable助手 - >在mouseup位置放置克隆 - >可拖放克隆

Question

我想創建一個類似於線框或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的格但每種克隆會自動疊加左側向下。之後我不能再拖動克隆。

Answer 1

這裏是一個起點：fiddle

，但是這是一個非常通用的解決方案，所以如果你有一個更具體的使用情況下，讓我知道！

的.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>