如何将jQuery拖拽移出删除逻辑适配到第三方拖拽库？

Let's translate the jQuery UI functionality you have into your library's event structure step by step. Here's how to replicate both the drop/clone behavior and the drag-out-to-remove feature:

1. Initialize Draggable Elements #

First, set up your draggable items (match this to your library's draggable initialization syntax if it differs slightly):

$(".draggable").draggable({
  cursor: "move",
  revert: "invalid",
  helper: "clone"
});

2. Configure Droppable Container Events #

Use your library's event binding format to handle drop, drag start/stop, and the critical "drag out to delete" behavior:

const droppable = $(".droppable");

// Handle drag start (keep your existing logic if needed)
droppable.on('drag:start', () => {
  $('.source-point').addClass('show');
  // Add any other start-time logic here
});

// Handle drag stop (keep your existing logic if needed)
droppable.on('drag:stop', (evt) => {
  $('.source-point').removeClass('show');
  // Add any other stop-time logic here
});

// Handle drop event (equivalent to jQuery UI's drop callback)
droppable.on('drag:drop', (ev, ui) => {
  const draggedElement = $(ui.draggable);
  
  // If it's a "new" cloned element, revert it on drag
  if (draggedElement.hasClass('new')) {
    draggedElement.draggable({ revert: true });
  } else {
    // Clone the dragged element, make it draggable, add "new" class, and append to container
    const newClone = draggedElement.clone()
      .draggable({ helper: "original" })
      .addClass('new');
    $(ev.target).append(newClone);
  }
});

// Handle drag leave event (equivalent to jQuery UI's out callback for deletion)
droppable.on('drag:leave', (event, ui) => {
  // Fade out the dragged element and remove it after animation
  $(ui.draggable).fadeOut(1000, function() {
    $(this).remove();
  });
});

Key Notes: #

• Event Names: Double-check your library's documentation for the exact event name that triggers when a draggable leaves the droppable container. I used drag:leave here, but some libraries might call it drag:exit or something similar.
• UI Object: Ensure that ui.draggable in your library's event callback refers to the draggable element (just like jQuery UI does). If your library uses a different property name (e.g., evt.draggable), adjust the code accordingly.
• Draggable Initialization: If your library's draggable setup uses a different method (e.g., new Draggable() instead of .draggable()), tweak the initialization code to match its API.

内容的提问来源于stack exchange，提问作者Devy