0

I have a list of two droppable boxes where the items can be moved from one box to the other. Now I would like to make it moveable via a handle area. What do I need to change so that dragging is only possible over a certain area - handle (e.g. the rest selectable text)?

  document.addEventListener('dragstart', e => {
  if (e.target.classList.contains('draggable')) {
    dragging = e.target;
    dragging.classList.add('dragging');
    cloned = dragging.cloneNode(true);
  }
});

fiddle

screenshot

Shenya
  • 334
  • 1
  • 3
  • 14
  • Hello Shenya, I have a question, what do you mean by "the rest selectable text"? Would you like to drag the whole item by using the handle and the handle only? – Thomas Zimmermann Aug 04 '22 at 13:39
  • @Thomas the rest can be a selectable text for example. The content. – Shenya Aug 04 '22 at 13:45
  • and the grip surface / handle area is the grip / handle for the element that can only be moved with that grip / handle like here https://stackoverflow.com/questions/26283661/drag-drop-with-handle – Shenya Aug 04 '22 at 13:54
  • It should look something like this: https://jsfiddle.net/Reksio/kp21vzms/16/. Except that I would also like to use links in the content container. How can I make this better? – Shenya Aug 08 '22 at 11:09

0 Answers0