Question

我有两个divs 我将所有div都移到我的components div中，这是一个board 在那里，我可以复制那些divs，但是一旦复制了div，就无法再移动

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

所以我要实现的目标是，一旦复制了div，我也应该能够将复制的div移走

要复制div，请在板子内部选择一个div，然后单击按钮复制（请注意，该按钮有点bug，可能需要按几次）

理想的输出是当一个组件被拖到板上时然后选择该组件并单击“复制”按钮所选的div应该被复制并且也可以拖动

更新我在代码中注意到的当我复制一个div时，它是不可拖动的，但是当我将另一个div从组件侧放置到板上时，所有东西都可以拖动

Answer 1

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

2。此外，您还需要优化代码，以使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

复制后div副本不可拖动

1 个答案: