draggable-next的完整demo

以下是一个基于jQuery实现的draggable-next完整demo:

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

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);
    }
  });
});

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