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 回答