Dragenter вызывает дважды перед перетаскиванием в html5, перетаскивая ⇐ Html

[Anonymous]

Я провожу исследование концепции HTML5 Drag and Drop, перейдя по этой ссылке. В настоящее время я столкнулся с проблемой события dragenter, которое срабатывает во второй раз (для дочернего элемента) перед перетаскиванием. Таким образом, стиль пунктирной границы, который я задал при перетаскивании, в некоторых случаях не удаляется после перетаскивания. Когда я искал в Google, я ссылался на несколько ссылок и на эту ссылку, но так и не смог решить проблему. Я добавил указатель-события свойства CSS: нет, но он несовместим в IE9 и IE10.

Обратите внимание, что мне нужна совместимость с IE9 и более поздними версиями, а также с Mozilla.

PFB фрагмент кода.

Код: Выделить всё

var dragSrcEl = null;
var dragEnteredSrcEl = null;
var collection = $();

function handleDragStart(ev) {
dragSrcEl = ev.target;

ev.target.style.opacity = 0.4;
ev.target.classList.add('moving');

ev.dataTransfer.setData('text/html', ev.target.innerHTML);
}

function handleDragOver(ev) {
ev.preventDefault();
}

function handleDragEnter(ev, el) {
ev.stopPropagation();
console.log('drag enter!');
var dragEnteringElement = ev.target;
collection = collection.add(dragEnteringElement);
// dragEnteredSrcEl = dragEnteringElement;
el.classList.add('over');
}

function handleDrop(ev, el) {
// console.log(ev.target);
var droppingElement = el;
// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != ev.target) {
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.style.opacity = 1;
dragSrcEl.innerHTML = droppingElement.innerHTML;
droppingElement.classList.remove('over');
droppingElement.innerHTML = ev.dataTransfer.getData('text/html');
}
}

function handleDragLeave(ev, el) {
// console.log(ev.target);
setTimeout(function() {
var dragLeavingElement = ev.target;
console.log(collection.length);
collection = collection.not(dragLeavingElement);
if (collection.length === 0) {
console.log('drag leave!');
el.classList.remove('over');
}
}, 1);
}

function handleDragEnd(ev) {
ev.target.style.opacity = 1;
ev.target.classList.remove('moving');
ev.target.classList.remove('over');
}

function handleContentClick(content) {
alert(content);
}

Код: Выделить всё

.clearfix {
clear: both;
}

[draggable] {
cursor: move;
}

.col-md-4 {
width: 150px;
height: 150px;
border: 2px solid orange;
float: left;
margin-top: 5px;
margin-right: 5px;
text-align: center;
}

.col-md-4.over {
border-style: dashed;
}

/* .col-md-4 h2 {
pointer-events: none;
} */

Код: Выделить всё

Hello!

Welcome!

World!

Big Hello!

Big Welcome!

Big World!

Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/493 ... g-and-drop