nút bản sao khi kéo

Question

tôi muốn có thể tạo bản sao của phần tử mà tôi muốn kéo. im sử dụng ui tiêu chuẩn có thể kéo và có thể phân đoạn. tôi biết về tùy chọn clone helper. nhưng điều đó không tạo ra một bản sao. mục kéo được hoàn nguyên về vị trí ban đầu.

Answer 1

Mark,

Hãy thử ví dụ này:

 $(document).ready(function(){ 
     $(".objectDrag").draggable({helper:'clone'}); 

     $("#garbageCollector").droppable({ 
      accept: ".objectDrag", 
      drop: function(event,ui){ 
        console.log("Item was Dropped"); 
        $(this).append($(ui.draggable).clone()); 
       } 
     }); 

    }); 

Và Html trông như thế này

 <div class="objectDrag" 
     style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div> 

    <div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div> 

Answer 2

Để lại kéo clone/copy, thiết lập các tham số withDataAndEvents-đúng:

$(this).append($(ui.draggable).clone(*true*)); 

Answer 3

Kể từ khi tôi không thể bình luận (chưa) Tôi sẽ để lại điều này như một câu trả lời riêng biệt - trong trường hợp ai đó, như tôi, sẽ tìm thấy câu hỏi này:

Đối với các câu hỏi từ bình luận

" Nhưng tôi muốn phần tử nhân bản/bị bỏ rơi ở cùng một vị trí nó bị bỏ đi. ? Bạn có biết làm thế nào tôi có thể làm điều đó"

tôi đã tìm thấy giải pháp trong khác nhau SO câu hỏi và câu trả lời là để thay đổi dòng này:

$(this).append($(ui.draggable).clone()); 

để

$(this).append($(ui.helper).clone()); 

(thay đổi ui.draggable để ui.helper)

Hy vọng nó giúp.