javascript - Drag and Drop HTML5

Question

Folks, how can i update the styles of dragged element

1. Update the element which is under drag
2. Update the position/space from where the element was dragged

it seems that using

event.target.addClass or event.target.styles.  etc

updates the element which is under drag as well as position from where it was taken

please take a look at this screenshot link, this is what i want to achieve when dragging the element, basically onDragStart

thank you

question from:https://stackoverflow.com/questions/65925912/drag-and-drop-html5

Answer 1

With this you can change style of element being dragged and keep the original style (or change it the way you like):

function handleDragStart(e) {
  this.style.color = 'red';  
}

function handleOnDrag(e) {
  this.style.color = 'black';
}

let items = document.querySelectorAll('ul>li');
items.forEach(function(item) {
  item.addEventListener('dragstart', handleDragStart, false);
  item.addEventListener('drag', handleOnDrag, false);
});

<ul>
  <li draggable="true">lorem ipsum</li>
  <li draggable="true">lorem ipsum</li>
  <li draggable="true">lorem ipsum</li>
</ul>