clone div 复制后不可拖动

Question

我有两个divs 一个 div 是所有 components 所在的位置，我正在将它们移动到我的 board div ，在那里我可以复制那些 divs，但是一旦 div 被复制，它就不能再移动了

这是一个例子： What i have so far can be viewed here

所以我想要实现的是，一旦 div 被复制，我应该也能够移动复制的 div

为了复制 div select 板内的 div 之一，然后点击按钮复制（请注意按钮有点问题可能需要按几次）

理想的输出是当组件被拖入板时一旦该组件被 selected 并且按钮 "copy" 被点击 selected div 应该被复制并且也应该是可拖动的

更新我在代码中注意到的当我复制一个 div 它是不可拖动的，但是当我从组件端放置另一个 div 到板时一切都变得可拖动

Answer 1

1.You 需要在您的 copy 按钮 click 事件处理程序中添加 $(".new_item").draggable();。

2.Also 您需要优化您的代码，以便 copy 和 delete 只需单击一下即可正常工作

喜欢以下：-

<script type="text/javascript">
  $(document).ready(function() {

    $(".component_item").draggable({
      helper: 'clone',
      cursor: "move"
    });

    $("#board").droppable({
      accept: ".component_item",
      drop: function(event, ui) {
        $(this).append($(ui.draggable).clone());
        $("#board .component_item").addClass("new_item");
        $(".new_item").removeClass("ui-draggable component_item");
        $(".new_item").resizable({
          handles: "all",
          autoHide: true
        });
        $(".new_item").draggable({});
      }

    });
    $( "#copy").click(function(e) {
        $(".new_item:last").clone().appendTo("#board");
        $(".new_item").draggable();
        $($this).css("border-style","solid");
    });
    $( "#delete").click(function(e) {
        $(".new_item:last").remove();
        $($this).css("border-style","none");
    });

  }); //    \End--Ready
</script>

输出：- http://plnkr.co/edit/MiG1lfG8sqJsPngbPuxQ?p=preview

clone div 复制后不可拖动

clone div is not draggable after it is copied

jquery

jquery-ui