Giao diện người dùng jQuery: Kéo và sao chép từ div gốc, nhưng giữ bản sao

Question

Tôi có một div, có jQuery UI Draggable được áp dụng. Những gì tôi muốn làm, là bấm và kéo đó, và tạo ra một bản sao được giữ trong dom và không bị loại bỏ khi bị bỏ.

Hãy suy nghĩ về một cỗ bài, phần tử hộp của tôi là bộ bài và tôi muốn kéo thẻ/div ra khỏi bộ bài đó và đặt chúng quanh trang của tôi, nhưng chúng sẽ là bản sao của div gốc. Tôi chỉ muốn chắc chắn rằng bạn không thể tạo một bản sao khác của một trong những div nhân bản vô tính.

Tôi đã sử dụng sau đây, mà không làm việc như tôi muốn:

$(".box").draggable({ 
     axis: 'y', 
     containment: 'html', 
     start: function(event, ui) { 
      $(this).clone().appendTo('body'); 
     } 
}); 

tôi đã tìm ra giải pháp của tôi:

$(".box-clone").live('mouseover', function() { 
    $(this).draggable({ 
     axis: 'y', 
     containment: 'html' 
    }); 
}); 
$(".box").draggable({ 
    axis: 'y', 
    containment: 'html', 
    helper: 'clone' 
    stop: function(event, ui) { 
     $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
    } 
}); 

Answer 1

Đây là những gì tôi cuối cùng đã làm việc đó:

$(".box-clone").live('mouseover', function() { 
    $(this).draggable({ 
     axis: 'y', 
     containment: 'html' 
    }); 
}); 
$(".box").draggable({ 
    axis: 'y', 
    containment: 'html', 
    helper: 'clone', 
    stop: function(event, ui) { 
     $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
    } 
}); 

Answer 2

Đây là giải pháp của mình:

$(".box-clone").live('mouseover', function() { 
    $(this).draggable({ 
     axis: 'y', 
     containment: 'html' 
    }); 
}); 
$(".box").draggable({ 
    axis: 'y', 
    containment: 'html', 
    helper: 'clone' 
    stop: function(event, ui) { 
     $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
    } 
}); 

Answer 3

Nếu bạn đang Tring để di chuyển các yếu tố (nói < li/>) từ một #source < ul/> đến một #destination < ul/>, và bạn muốn họ sao chép (như trái ngược với di chuyển), và vẫn có thể sắp xếp ở bên phải, tôi tìm thấy giải pháp này:

$(function() { 

    $("#source li").draggable({ 
     connectToSortable: '#destination', 
     helper: 'clone' 
    }) 

    $("#destination").sortable(); 

    }); 

Tôi biết nó có vẻ cực kỳ đơn giản, nhưng nó hiệu quả với tôi! :)

Answer 4

Đây là cách tôi nhận được nó hoạt động: PS: 'điểm đánh dấu' là đối tượng cần kéo và 'bản đồ' là vùng chứa đích.

$(document).ready(function() { 
    //source flag whether the drag is on the marker tool template 
    var template = 0; 
    //variable index 
    var j = 0; 
    $(".marker").draggable({ 
     helper: 'clone', 
     snap: '.map', 
     start: function(event, ui) { 
      //set the marker tool template 
      template = 1; 
     } 
    }); 
    $(".map").droppable({ 
     accept: ".marker", 
     drop: function(event, ui) { 
      $(this).find('.map').remove(); 
      var item = $(ui.helper); 
      var objectid = item.attr('id'); 
      //if the drag is on the marker tool template 
      if (template == 1) { 
       var cloned = $(item.clone()); 
       cloned.attr('id', 'marker' + j++); 
       objectid = cloned.attr('id'); 
       cloned.draggable({ 
        containment: '.map', 
        cursor: 'move', 
        snap: '.map', 
        start: function(event, ui) { 
         //Reset the drag source flag 
         template = 0; 
        } 
       }); 
       cloned.bind("contextmenu", function(e) { 
        cloned.remove(); 
        return false; 
       }); 
       $(this).append(cloned); 
      } 
      i++; 
      var offsetXPos = parseInt(ui.offset.left - $(this).offset().left); 
      var offsetYPos = parseInt(ui.offset.top - $(this).offset().top); 
      alert("Dragged " + objectid + " to (" + offsetXPos + "," + offsetYPos + ")"); 
     } 
    }); 
});