使用jQuery Draggable/Droppable时克隆助手移除及显示Div问题求助

Hey there! Let's tackle this jQuery drag-and-drop issue you're having. I’ve run into similar quirks before with the clone helper, so let’s break down what’s probably going wrong and how to fix it.

Common Root Causes & Quick Checks #

First, let’s rule out the most frequent culprits that break Droppable functionality:

• Missing jQuery UI dependencies: Draggable and Droppable are part of jQuery UI, not core jQuery. Make sure you load jQuery first, then the jQuery UI script (and optional stylesheet) in your HTML.
• DOM timing issues: If your script runs before the page’s DOM finishes loading, the Droppable binding will fail entirely. Always wrap your drag/drop code in a DOM-ready handler.
• Clone helper event conflicts: When using helper: "clone", you’re dragging a copy of the original element. If you don’t target this clone correctly, it can prevent the drop event from firing or leave the clone lingering.

Fixed Full Code Example #

Let’s assume your HTML structure looks like this (adjust classes to match your project):

<!-- Draggable element -->
<div class="drag-source">Drag Me!</div>

<!-- Droppable target with hidden div -->
<div class="drop-target">
  <div class="hidden-content" style="display: none;">I appear after drop!</div>
</div>

Here’s the corrected jQuery code that handles your requirements:

$(document).ready(function() {
  // Initialize Draggable with clone helper
  $(".drag-source").draggable({
    helper: "clone",
    cursor: "move",
    // Optional: Add a class to the clone for visual feedback
    start: function(event, ui) {
      ui.helper.addClass("dragged-clone");
    }
  });

  // Initialize Droppable with proper drop handling
  $(".drop-target").droppable({
    accept: ".drag-source", // Restrict to only your draggable elements
    hoverClass: "drop-hover", // Visual feedback when hovering
    drop: function(event, ui) {
      // 1. Remove the cloned helper (the element you dragged)
      ui.helper.remove();

      // 2. Show the hidden div inside the drop target
      $(this).find(".hidden-content").show();

      // Optional: If you want to add a copy of the original element to the target
      // $(this).append(ui.draggable.clone().removeClass("drag-source"));
    }
  });
});

Key Details to Note #

• $(document).ready(): Ensures your code runs only after all DOM elements are loaded, preventing binding to non-existent elements.
• ui.helper vs ui.draggable: ui.helper refers to the clone you’re dragging—this is what you want to remove. ui.draggable is the original element, which you can use if you need to copy/move the source instead of just removing the clone.
• accept option: Limits which elements can trigger the drop event, avoiding accidental conflicts with other draggable elements on the page.
• Console debugging: If you still get errors, open your browser’s dev tools (F12) and check the console:
  • $().draggable is not a function: Means jQuery UI isn’t loaded correctly—double-check your script order.
  • Drop event not firing: Verify the accept selector matches your draggable’s class, and ensure the drop target doesn’t have pointer-events: none in its CSS.

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