клон div не перетаскивается после копирования

Question

у меня есть два divs один div - это то место, где все components находятся, я перемещаю их в мой board div, и как только я смогу скопировать эти divs, но как только div скопирован, он больше не может быть перемещен

вот пример: То, что у меня есть, можно посмотреть здесь

так что я пытаюсь достичь, как только div скопирован, я также должен иметь возможность перемещать этот скопированный div

для того, чтобы скопировать div, выберите один из div внутри доски, а затем нажмите кнопку копирования (учтите, что кнопка немного глючная, возможно, придется нажать несколько раз)

• желаемый результат когда компонент перетаскивается на плату и как только этот компонент выбран и нажата кнопка «копировать» выбранный 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