横向看板泳道中可排序Div被向下挤压问题求助

Hey there! I see you're running into a problem where all items in a swim lane get squished downward when you drag one of them—let's break down how to fix this step by step.

First, Fix the jQuery Selector Mistake #

Looking at your code, you missed the dot (.) in your class selectors, which means jQuery isn't actually targeting your elements correctly. That's a key reason behind the weird layout behavior!

Your original code has:

$("swim-lane-wrapper") // Missing . for class selector
$("sortable") // Same issue here

Correct the selectors by adding the dot to target classes properly:

$(function() {
  $(".swim-lane-wrapper")
    .sortable({
      axis: "Y",
      handle: ".category-box",
      connectWith: ".swim-lane-wrapper",
      // Add this helper option to prevent original item collapse during drag
      helper: "clone"
    })
    .disableSelection();
});

$(function() {
  $(".sortable")
    .sortable({
      connectWith: ".sortable", // Ensure this matches your target item container class
      axis: "Y",
      helper: "clone" // Stops layout shifts from the original item moving mid-drag
    })
    .disableSelection();
});

Next, Tweak CSS to Prevent Layout Collapse #

The squishing happens because your swim lane containers or items don't have stable dimensions. Add these CSS rules to fix it:

1. Stabilize swim lane containers
   Stop lanes from shrinking when items are dragged by setting a minimum height and proper layout:

   .swim-lane-wrapper {
     min-height: 250px; /* Adjust to fit your item size */
     display: inline-block; /* For horizontal swim lane arrangement */
     vertical-align: top; /* Keep all lanes aligned at the top */
     margin: 0 15px;
     padding: 10px;
     border: 1px solid #ddd;
   }
   

2. Give items consistent dimensions
   Prevent items from collapsing by setting fixed heights and spacing:

   .sortable .category-box {
     height: 90px; /* Fixed height avoids layout shifts */
     margin: 10px 0;
     padding: 12px;
     background: #f5f5f5;
     cursor: move;
     border-radius: 4px;
   }
   

Why This Works #

• Corrected selectors ensure jQuery UI Sortable attaches to the right elements.
• The helper: "clone" option creates a copy of the dragged item instead of moving the original immediately, stopping the layout from collapsing right away.
• Stable CSS dimensions for containers and items eliminate unexpected squishing when dragging starts.

Give these changes a test—they should resolve the downward squishing issue you're facing!

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