在固定高度div中实现元素可拖拽且可排序的问题求助

Hey there, let's work through this issue—you're right that combining jQuery UI's draggable and sortable can get tricky when they step on each other's toes. Let's break down the problems you're seeing and how to fix them:

Why Your First Approach Failed (Adding sortable() to Working Draggable) #

When you initialize a div as both draggable() and sortable(), the draggable plugin takes over the drag events, blocking sortable from doing its job. jQuery UI's sortable actually includes built-in drag functionality, so you rarely need to use both plugins on the same elements directly.

Fixing the "this Points to the Whole List" Issue #

In your second approach, the start event's this refers to the sortable container (your #sortable-list) by design—not the individual item being dragged. To target the specific element being moved, you need to use the ui.item parameter provided in the event callback.

The Correct Implementation #

Here's a clean solution that handles both the fixed-height container constraint and proper sortable/drag behavior:

1. Skip the separate draggable() initialization—sortable has all the drag functionality you need built-in.
2. Use ui.item in event callbacks to access the dragged element.
3. Restrict drag scope with the containment option to keep items inside your fixed-height parent div.

Example Code

<!-- Fixed-height parent container -->
<div id="fixed-height-container" style="height: 300px; overflow-y: auto; border: 1px solid #ccc;">
  <ul id="sortable-list">
    <li class="sortable-item">Item 1</li>
    <li class="sortable-item">Item 2</li>
    <li class="sortable-item">Item 3</li>
  </ul>
</div>

<script>
$(function() {
  $('#sortable-list').sortable({
    // Keep items inside the fixed-height parent
    containment: '#fixed-height-container',
    // Customize the drag start behavior
    start: function(event, ui) {
      // ui.item is your dragged element—use this instead of $(this)
      ui.item.addClass('dragging');
      console.log('Starting drag on:', ui.item.text());
    },
    // Clean up when drag stops
    stop: function(event, ui) {
      ui.item.removeClass('dragging');
    },
    // Optional: Make items snap to place smoothly
    tolerance: 'pointer'
  }).disableSelection(); // Prevent text selection during drag
});
</script>

<style>
.sortable-item {
  padding: 10px;
  margin: 5px 0;
  background: #f0f0f0;
  cursor: move;
}
.dragging {
  background: #e0e0e0;
  transform: scale(1.02);
}
</style>

If You Really Need to Combine Draggable and Sortable #

If you have a specific use case requiring separate draggable items (like dragging elements into the sortable list from outside), use the connectToSortable option to link them:

// For items outside the sortable list
$('.external-draggable').draggable({
  connectToSortable: '#sortable-list',
  helper: 'clone',
  revert: 'invalid' // Snap back if dropped outside the sortable
});

// The sortable list
$('#sortable-list').sortable({
  accept: '.external-draggable',
  containment: '#fixed-height-container'
});

Quick Checks to Avoid Headaches #

• Ensure you're using compatible versions of jQuery and jQuery UI (older versions can have unexpected conflicts).
• Double-check that your fixed-height container has overflow-y: auto or scroll so items don't disappear when dragged outside the visible area.
• Make sure no other scripts are overriding drag events (like custom touch handlers or other plugins).

That should resolve both the sortable activation issue and the context problem with this!

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