如何为jQuery UI拖拽克隆的元素添加点击事件？

Got it, let's tackle this problem step by step. You want to drag those product elements into the droppable container, create a clone of them, and make those clones clickable to open a property configuration panel. Here's a complete working solution using jQuery UI (since your code references ui-draggable-helper, I assume you're already leveraging jQuery UI for drag-and-drop):

Full Working Code #

First, make sure you include jQuery and jQuery UI in your project (use CDNs or local files):

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<!-- Your HTML -->
<div id="drag_website" class="d product">
  <p>Website</p>
</div>
<div id="drag_phone" class="d product2">
  <p>Phone</p>
</div>
<div id="droppable_container" class="ui-draggable-helper">
  <p>Drop your content here!!</p>
</div>

<!-- Custom Script -->
<script>
$(document).ready(function() {
  // 1. Setup draggable elements
  $('.d').draggable({
    helper: 'clone', // Show a clone while dragging
    revert: true, // Revert original element to its position after drag
    cursor: 'move'
  });

  // 2. Setup droppable container
  $('#droppable_container').droppable({
    accept: '.d', // Only accept elements with .d class
    drop: function(event, ui) {
      // Create a deep clone of the dragged element
      const clonedElement = ui.helper.clone();
      
      // Remove draggable functionality from the clone (optional, adjust if you want clones to be re-draggable)
      clonedElement.removeClass('d').draggable('destroy');
      
      // Add a custom class to identify clones for styling/click events
      clonedElement.addClass('cloned-product');
      
      // Append the clone to the droppable container
      $(this).append(clonedElement);

      // 3. Add click event to open property config
      clonedElement.on('click', function() {
        // Extract relevant properties from the clone (customize this based on your needs)
        const elementType = $(this).find('p').text();
        const originalId = ui.draggable.attr('id');
        const originalClass = ui.draggable.attr('class');
        
        // Open config panel - this is a simple alert example, replace with your actual config UI
        alert(`Config Panel for ${elementType}\nOriginal ID: ${originalId}\nOriginal Class: ${originalClass}`);
        
        // For a more advanced setup, you could show a modal with form fields here
        // Example: $('#config-modal').show().find('.config-type').text(elementType);
      });
    }
  });
});
</script>

<!-- Optional CSS to improve visibility -->
<style>
.cloned-product {
  border: 2px solid #2196F3;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  display: inline-block;
  background: #f5f5f5;
}
#droppable_container {
  border: 2px dashed #ccc;
  padding: 20px;
  margin-top: 20px;
  min-height: 150px;
}
.d {
  padding: 10px;
  margin: 10px;
  border: 1px solid #333;
  display: inline-block;
  cursor: move;
  background: #fff;
}
</style>

Key Breakdown #

• Drag Configuration: The helper: 'clone' option ensures we drag a copy instead of the original element, and revert: true keeps the original element in its original position.
• Drop Handling: When an element is dropped, we create a deep clone, strip it of draggable functionality (adjust this if you want clones to be re-draggable), and add it to the container with a custom class for easy identification.
• Click-to-Config: We bind a click event directly to the clone. Inside this event, you can extract any properties you need (like element type, original ID, custom attributes) and trigger your configuration interface—whether that's a modal, a sidebar, or an inline form.
• Styling: The optional CSS helps distinguish clones from original elements and makes the droppable container more user-friendly.

Feel free to tweak the configuration logic to match your exact needs (e.g., adding form fields for specific properties, saving config data to localStorage, etc.)!

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