Как изменить поведение html drag and drop?

Question

[Артур Кудашев]

Здравствуйте, как изменить стандартное поведение элемента с атрибутом draggable? Если перетаскивать элемент, то перетаскивается не сам элемент, а его копия. Как убрать копию и вместо нее поставить сам элемент? Вот код: https://codepen.io/arthurkud/pen/yWyoyP

Answer 1

[kova1ev]

так работает dnd браузера, можно отключить его:

items[i].ondragstart = function() {
  return false;
};

но тогда нужно будет переделывать на события onmousedown, onmousemove, onmouseup

Comments

[Артур Кудашев]

kova1ev, не работает.

[kova1ev]

Артур Кудашев, вы используете события dnd бразера и одновременно двигаете сам элемент. Поэтому происходит такое как бы раздвоение элемента. Можно отключить dnd браузера и использовать события onmousedown onmousemove onmouseup, и тогда нужно будет давать позицию absolute и двигать элемент, как вы это делаете сейчас. Еще вариант - использовать dnd браузера, в момент события drag присваивать элементу opacity = 0, тогда элемент в панели исчезнет и будет виден только двигаемый аватар. В этом случае не нужно перемещать элемент самому. При окончании перетаскивания не забудьте вернуть opacity

const lists = document.getElementsByClassName('list');
const items = document.getElementsByClassName('list-item');

for (let i = 0; i < items.length; i++) {
	items[i].setAttribute('id', i);
	items[i].setAttribute('draggable', 'true');

	items[i].addEventListener('dragstart', dragStart);
	items[i].addEventListener('drag', drag);
}

function dragStart(event) {
	event.dataTransfer.setData('dragObjectId', 'asd');
}

function drag(event) {
	event.target.style.opacity = 0;
}