Feature request: ability to disable reordering / moving of original element

adam-lynch commented 7 years ago

That sounds weird but it makes sense. Let's say you have the "Multiple containers + handle" example hooked up to a framework and the items in each container are algorithmically sorted, not decided by the user. I want to allow the user to drag from container A to container B (no ghost element shown in B, just the container itself would change style, see #5), and when it's dropped the item's position would be decided by the sorting algorithm. So, the items in container A shouldn't reorder if the user dragged an item up/down the list.

If any of that isn't clear, let me know. Here is a CodePen where I've gotten most of that working with dragula (ignoring the sort): http://codepen.io/adam-lynch/pen/XRJJWr.

One thing I didn't achieve in that CodePen example is I'd allow like the original element not to disappear from its original location when I'm dragging it (and I'd like to style it differently) but maybe that's possible via CSS with this library? I'm not sure (see #2).

I guess what I want is the items in the containers to be untouched as the user drags (but they should still see the element is being dragged / the floating element following the cursor).

supraniti commented 7 years ago

Setting 'dataMode' to 'true' (in the options object) will 'undo' all DOM mutations when the drag event ends. This will allow to to listen to 'lmddend' event, and run your sorting procedure. Adding the class 'lmdd-dispatcher' to the source container and 'lmdd-clonner' to the source draggable elements will keep the source element in its original position while dragging.

But this will not be a complete solution to your request because items in the target container will still be sorted while the drag operation runs. I will see if i can find an easy way to disable sorting and let you know...

adam-lynch commented 7 years ago

Yeah. To be clear, my ideal thing would be that if no DOM mutations happened (well, in the containers at least) from start to end. So I'd expect the start and end events to fire, and I'd handle the rest.

adam-lynch commented 7 years ago

OK so I've realised that the cloning feature could help achieve this if it was a little less limited. Right now, you can't have two containers with lmdd-dispatcher, but if you could, I'd do:

Make every container a dispatcher and its items clonable.
When dragging an element over another container, hide the copy of the element shown in that other container using CSS.
On lmddend, if the dragged element was dropped in a container, delete the element in the source/original container.

I've implemented this at http://codepen.io/adam-lynch/pen/wdKPLg (except only the list on the left has lmdd-dispatcher).

The CSS I've added is:

.visible-layer .lmdd-shadow {
  display: none !important;
}

.hidden-layer .lmdd-hidden {
    display: none;
}

Unfortunately though, it results in the original element disappearing and reappearing again.

In a slightly different example, I use cloning plus dataMode (and do more in lmddend) http://codepen.io/adam-lynch/pen/bWVLpQ . The difference isn't really important here though. In reality, I'd probably use cloning plus dataMode and move the items around using KnockoutJS in lmddend.

Side note: I've achieved it here with Dragula's copy: true and dragend event; http://codepen.io/adam-lynch/pen/PmPJBX.

supraniti / Lean-Mean-Drag-and-Drop

Feature request: ability to disable reordering / moving of original element #6