Question

我有一个元素列表。它们都具有draggable="true"属性，可以触发ondragenter和ondragover事件。换句话说，它们都是可拖动的和可拖放的。

问题是，当我拖动一个元素时，它的ondragenter事件会立即触发。这不是我的预期。

如何阻止我拖动元素的这些事件？

＆＃13;

var div = document.querySelectorAll('.div');
var i = 0;
for(i = 0; i < div.length; i++) {
    (function(j) {
        div[j].addEventListener('dragstart', handlDragStart);
        div[j].addEventListener('dragenter', handleDragEnter);
        div[j].addEventListener('dragover', handleDragOver);
    })(i)
}

function handlDragStart(ev) {
	ev.dataTransfer.effectAllowed = 'move';
	ev.dataTransfer.dropEffect = 'move';
}

function handleDragEnter (ev) {
	ev.preventDefault();
    ev.target.classList.add('enter');
 }

 function handleDragOver (ev) {
	ev.preventDefault();
 }

＆＃13;

.div {
    width:100px;
    height:100px;
    border: 1px solid #333;
    background-color: #ddd;
    display: inline-block;
}
.enter {
    border: 3px dotted red;
}

＆＃13;

<div>
    <div class="div" draggable="true">1</div>
    <div class="div" draggable="true">2</div>
    <div class="div" draggable="true">3</div>
    <div class="div" draggable="true">4</div>
    <div class="div" draggable="true">5</div>
</div>

＆＃13;

我做了这个例子。我希望当我将rec拖到另一个rec时，后者会得到一个红色边框。你可以看到我开始拖动的时候，第一个rec会立即获得红色边框，这意味着dragenter()会触发。我该如何预防？

如何防止dragenter事件触发draggable元素本身？

0 个答案: