如何製作此標記的另一圖像（通過拖動）不會影響原始圖像

當您運行此代碼時，會出現一個「拖動我向下」的框，我需要將其拖動到另一個副本（每個當我拖動它）同一個盒子，而不影響原始盒子。我應該在代碼中做出什麼修改才能獲得上述所需的結果。如何製作此標記的另一圖像（通過拖動）不會影響原始圖像

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Draggable + Sortable</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } 
    li { margin: 5px; padding: 5px; width: 150px; } 
    </style> 
    <script> 
    $(function() { 
    $("#sortable").sortable({ 
     revert: "true", 
     helper:"clone" 
    }); 
    $("#sortable").draggable({ 
     //connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "valid" 
     //var dra = jQuery.extend({}, draggable) 
    }); 
    //$("ul, li").disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<ul> 
    <li id="sortable" class="ui-state-highlight">Drag me down</li> 
</ul> 

</body> 
</html>

來源

2015-07-04 Talha Nehal

你可以使用jQuery .clone()函數來實現你想要的。

更改代碼

$(function() { 
    $("#sortable").sortable({ 
     revert: "true", 
     helper:"clone" 
    }); 
    $("#sortable").draggable({ 
     //connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "valid", 
     stop:function(){ 
      $(this).clone().appendTo("body"); 
     } 
     //var dra = jQuery.extend({}, draggable) 
    }); 
    //$("ul, li").disableSelection(); 
    });

FIDDLE

來源

2015-07-04 07:17:41 Hemal

如何製作此標記的另一圖像（通過拖動）不會影響原始圖像

回答

相關問題