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 div，但每个克隆将自动堆叠在左侧。之后我再也无法拖动克隆了。

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>

可拖动的助手 - ＆gt;将克隆放在mouseup的位置 - ＆gt;可拖动的克隆

1 个答案: