I am trying to make a list sortable by dragging into right position. But I want the dragging only to be possible using the “drag icon” to the right. The other text area should be either selectable or clickable.
@SempervivumDec 27.2021 — #I got this working by making the span draggable only. Disadvantage: The feedback image visible during dragging doesn't include the list item but is showing the icon inside the span only. This might be fixed by cloning the li and position it near the mouse pointer.
@sibertauthorDec 27.2021 — #> @Sempervivum#1640910 by making the span draggable only
Yes, this was exactly what I asked for. But the visual effect could be better. I found that one can set the <li> as temporarily draggable. I got this to work with two disadvantages. It work only with the first line. And you can drop it on the drag icon.
@SempervivumDec 27.2021 — #@sibert#1640928 >It work only with the first line.
The reason is that querySelector matches the **first** element only. You need to use querySelectorAll and a loop to do this for all elements.
>And you can drop it on the drag icon.
Take a look at my JS: ``<i> </i> document.addEventListener('drop', function (event) { event.preventDefault(); // if the target is the span or handle // the element where the dragged element // has to be inserted // is the parent element li: let ele = event.target; if (ele.matches('span')) { ele = ele.parentNode; } ele.style['border-bottom'] = ''; ele.parentNode.insertBefore(dragging, ele.nextSibling);<i> </i>`` It gets the parent element li when the item is dropped on the span or handle.