Question

我想完成你在这里看到的内容： https://jsfiddle.net/scalar/6aneLqu5/

$(".snippet_item").draggable({

    containment: "#content_area",
  appendTo: "#content_area",
  //helper: "clone",       
  start: function () {            
  },
  stop: function() {
   console.log('stopped')
  }
});

但使用克隆选项。如果我使用克隆选项，它将无法按预期工作

Answer 1

请看下面的代码

https://jsfiddle.net/6aneLqu5/23/

$(function() {

   $("#content_area").droppable({
     drop: function(event, ui) {
       //this if condition is for avoiding multiple time drop and attachment of same item
       if (ui.draggable.hasClass("snippet_item")) {
         var $item = $(ui.helper).clone(); //getting the cloned item
         rel = $item.attr('rel');
         $item.removeClass("snippet_item");

         if (rel == "a") {
           $item.html("<div id='e1' class='drag_elm'>Item 1</div>");
         } else if (rel == "b") {
           $item.html("<div id='e2' class='drag_elm'>Item 2</div>");
         } else if (rel == "c") {
           $item.html("<div id='e3' class='drag_elm'>Item 3</div>");
         }
         $(this).append($item);
         makeDraggable($item);
       }
     }
   })

   function makeDraggable($item) {
     $item.draggable({
       start: function() {},
       stop: function() {
         console.log('stopped')
       }
     });
   }
   $(".snippet_item").draggable({

     containment: "#content_area",
     appendTo: "#content_area",
     helper: "clone",
     start: function() {},
     stop: function() {
       console.log('stopped')
     }
   });

 })

希望您正在寻找这样的行为。

Jquery ui拖放+克隆

1 个答案: