jQuery UI：從原始div拖放和克隆，但保留克隆

Question

我有一個div，其中應用了jQuery UI Draggable。我想要做的是單擊並拖動它，然後創建一個保存在dom中但不會在刪除時刪除的克隆。

想象一副撲克牌，我的盒子元素是套牌，我想從牌組中拉出撲克牌/ div，並將它們放在我的頁面周圍，但它們將是原始div的克隆。我只是想確保你不能創建另一個克隆的div的克隆。

我用以下，沒有工作像我想：

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

我想通了，我的解決方案：

$(".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

以下是我最終做過的工作：

$(".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

這裏是他的解決方案：

$(".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

如果你特林移動元素（比如< LI/>）從#source < UL/>到#destination < UL/>，並且希望他們能夠克隆（而不是移動），並且仍然在右邊排序，我發現這個解決方案：

$(function() { 

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

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

    }); 

我知道這似乎超簡單，但它爲我工作！ :)

Answer 4

下面是我如何得到它的工作： PS：'標記'是要拖動的對象，'地圖'是目標容器。

$(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 + ")"); 
     } 
    }); 
});