Dragula JS如何创建包含元素排序信息的可分享链接？

Hey there! Great question—let me break this down clearly for you.

First off: Dragula JS itself doesn’t include built-in support for generating shareable sort links or restoring a saved order. It’s focused purely on handling the drag-and-drop interaction logic. So you’ll need to build that custom functionality on top of it. But don’t worry, it’s totally manageable with a few extra steps!

Here’s a step-by-step approach to make this work:

1. Capture the sorted order after drag events #

Dragula emits events you can hook into to detect when a user finishes rearranging elements. The drop event is perfect for this—every time a user drops an element into a new position, you can capture the current order of items in your container.

For example, if your elements have unique data-id attributes to identify them:

// Initialize Dragula
const drake = dragula([document.getElementById('your-container')]);

// Listen for drop events to capture the current order
drake.on('drop', function() {
  const sortedIds = Array.from(document.getElementById('your-container').children)
    .map(el => el.getAttribute('data-id'));
  // Now you have an array of IDs in the current sorted order
  console.log('Sorted IDs:', sortedIds);
});

2. Generate a shareable URL with the sort order #

Once you have the sorted ID array, you can encode it into a URL query parameter. You can either join the IDs into a comma-separated string (simple) or use JSON.stringify (better for more complex data):

// Create a comma-separated string of sorted IDs
const sortParam = sortedIds.join(',');
// Build the shareable URL
const shareableUrl = `${window.location.origin}${window.location.pathname}?sort=${sortParam}`;

// You can then display this URL to the user, copy it to clipboard, etc.
console.log('Shareable link:', shareableUrl);

3. Restore the sorted order when loading the page #

On page load, check if the sort query parameter exists. If it does, parse it and rearrange your container’s elements to match the saved order:

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const sortParam = urlParams.get('sort');
  
  if (sortParam) {
    const sortedIds = sortParam.split(',');
    const container = document.getElementById('your-container');
    // Remove all elements from the container temporarily
    const elements = Array.from(container.children);
    container.innerHTML = '';
    
    // Append elements in the order specified by the sorted IDs
    sortedIds.forEach(id => {
      const element = elements.find(el => el.getAttribute('data-id') === id);
      if (element) {
        container.appendChild(element);
      }
    });
    
    // Re-initialize Dragula after rearranging (if needed)
    dragula([container]);
  } else {
    // Load default order if no sort parameter exists
    dragula([document.getElementById('your-container')]);
  }
});

Key Notes to Keep in Mind #

• Unique Identifiers: Make sure each draggable element has a unique, persistent identifier (like data-id)—don’t rely on index positions, since those change when sorting.
• Error Handling: Add checks for cases where a saved ID doesn’t exist in the current page (maybe an element was removed since the link was created) to avoid breaking the layout.
• URL Length: If you have a lot of elements, a comma-separated string might get long. For very large datasets, you could use a shorter encoding (like base64) or store the order in a backend with a shareable token instead.

That’s it! With these custom additions, you’ll have a fully functional shareable sort feature using Dragula.

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