jQuery UI拖拽克隆功能问题：无法删除已添加的运算符

Hey there! Let's figure out how to add delete functionality to those +/- operators you're dragging and sorting for your equation "1_2_3=6". Here are three straightforward, jQuery UI-friendly approaches you can implement:

1. Add a Delete Button to Each Operator Item #

This is the most intuitive for users—just slap a tiny delete icon/button onto every operator element you create. When clicked, it removes that specific operator from the list.

Example Code: #

First, adjust your operator element template to include the delete button:

<div class="operator-item ui-state-default">
  <span class="operator-symbol">+</span>
  <button class="delete-operator">×</button>
</div>

Then bind a click event to handle deletion (use event delegation since operators are dynamically added):

// Handle delete button clicks
$(document).on('click', '.delete-operator', function() {
  // Remove the parent operator item
  $(this).closest('.operator-item').remove();
  // Optional: Trigger your equation validation/update function here
  checkEquation();
});

Pro tip: Style the delete button to be subtle (like a small gray X in the corner) so it doesn't clutter your UI until the user hovers over the operator item.

2. Create a "Drop to Delete" Zone #

If you prefer a drag-based workflow, set up a dedicated droppable area on your page. Users can drag unwanted operators into this zone to delete them.

Example Code: #

First, add the delete zone to your HTML:

<div id="delete-zone" class="ui-state-highlight">Drag operators here to delete</div>

Then initialize it as a droppable target with jQuery UI:

// Initialize delete zone
$('#delete-zone').droppable({
  accept: '.operator-item', // Only accept operator elements
  drop: function(event, ui) {
    // Delete the dragged operator
    ui.draggable.remove();
    // Update your equation logic
    checkEquation();
  },
  hoverClass: 'delete-zone-hover' // Add visual feedback when hovering
});

3. Keyboard Shortcut for Deletion #

For power users, add a keyboard shortcut (like the Delete key) to remove selected operators. First, add a way to select operators, then listen for the keypress.

Example Code: #

// Add selection logic when clicking an operator
$(document).on('click', '.operator-item', function() {
  $('.operator-item').removeClass('selected');
  $(this).addClass('selected');
});

// Listen for Delete key press
$(document).keydown(function(e) {
  if (e.key === 'Delete' && $('.operator-item.selected').length) {
    $('.operator-item.selected').remove();
    checkEquation();
  }
});

Key Notes to Remember: #

• After deleting an operator, make sure to trigger any functions that update your equation's state (like validating if "1+2+3=6" is now correct).
• Since you're using jQuery UI Sortable, removing elements won't break the sortable functionality—it will automatically adjust the remaining items' positions.

Pick whichever approach fits your UI design best—all of these integrate smoothly with your existing drag-and-sort setup. Feel free to tweak the styles or logic to match your personal homepage's vibe!

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