jQuery 拖拽插件 draggable-next 使用教程及完整 Demo

CSS:

.container { display: flex; flex-wrap: wrap; }

.item { width: 100px; height: 100px; background-color: #ccc; margin: 10px; text-align: center; line-height: 100px; cursor: move; }

JS:

$(function() { $('.item').draggable({ helper: 'clone', start: function(event, ui) { $(this).css('visibility', 'hidden'); }, stop: function(event, ui) { $(this).css('visibility', 'visible'); } });

$('.container').droppable({ tolerance: 'intersect', drop: function(event, ui) { var $item = ui.draggable.clone(); $item.draggable({ containment: '.container', cursor: 'move', helper: 'original', start: function(event, ui) { $(this).css('z-index', 999); }, stop: function(event, ui) { $(this).css('z-index', 'auto'); } }); $(this).append($item); } }); });

该示例实现了一个拖拽元素并在容器中生成新元素的效果。每个元素都可以拖拽，拖拽时元素会变成半透明，拖拽结束后，元素会回到原来的位置。在容器中放置元素时，会生成一个新元素，该元素也可以拖拽，拖拽时会在容器内移动，拖拽结束后，元素会停留在容器中。