3
儘管通過在線教程來了解原生HTML5 drag'n'drop我不明白爲什麼'drop'事件不會爲我的基本html頁面啓動。爲什麼'drop'事件不會在此網頁上觸發?
小提琴是在這裏 - https://jsfiddle.net/carlv/0yeuce3u/
代碼如下。 HTML:
<div id="wrapper">
<div id="fixedWidth">
<div id="modulesBlock">
<div id="mod1" class="module" draggable="true" ></div>
<div id="mod2" class="module" draggable="true" ></div>
<div id="mod3" class="module" draggable="true" ></div>
<div id="mod4" class="module" draggable="true" ></div>
<div id="mod5" class="module" draggable="true" ></div>
<div id="mod6" class="module" draggable="true" ></div>
<div id="mod7" class="module" draggable="true" ></div>
<div id="mod8" class="module" draggable="true"></div>
<div id="mod9" class="module" draggable="true" ></div>
<div id="mod10" class="module" draggable="true"></div>
</div>
</div>
<div id="theRest">
<div id="contentBlock">
<div class="target" id="target1" ></div>
<div class="target" id="target2" ></div>
</div>
</div>
</div>
和JavaScript來處理事件如下:
function moduleDragStart(ev) {
console.log(ev.target.id);
ev.dataTransfer.setData("text", ev.target.id);
}
function handleDrop(e) {
e.preventDefault();
console.log('drop onto --'+e.target.id);
}
function handleDragEnter(e) {
console.log('target dragenter ='+e.target.id);
e.preventDefault();
this.classList.add('over');
}
function handleDragEnd(e) {
[].forEach.call(cols, function (col) {
col.classList.remove('over');
});
}
function handleDragLeave(e) {
this.classList.remove('over');
}
var cols = document.querySelectorAll('.target');
[].forEach.call(cols, function(col) {
col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('dragend', handleDragEnd, false);
col.addEventListener('drop', handleDrop, false);
});
var mods = document.querySelectorAll('.module');
[].forEach.call(mods, function(mod){
mod.addEventListener('dragstart',moduleDragStart,false);
});
當我試圖將一個模塊塊(在小提琴紅色)拖動到目標(在小提琴白色)塊,而我可以看到dragenter和dragleave事件觸發,出於某種原因drop事件不會觸發目標元素上的drop事件偵聽器。有任何想法嗎 ?
請注意,我從山坳移動'dragend'事件國防部 –
非常感謝您的及時幫助 - 我會在界! :P – user1517566