2015-07-21 10 views
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事件偵聽器。有任何想法嗎 ?

回答

0

您尚未定義dragover事件。如果你這樣做,它可以正常工作。如您使用的dragenter只需使用相同的功能或定義一個簡單的一個:

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

.... 

col.addEventListener('dragover', handleDragEnter, false); 

一旦你做到這一點,它滴罰款。你可以看到它在這裏工作(或在此JSFiddle):

function moduleDragStart(ev) { 
 
    console.log(ev.target.id); 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function handleDrop(e) { 
 
    // this/e.target is current target element. 
 
    e.preventDefault(); 
 
    console.log('--'+e.target.id); 
 
} 
 

 
function handleDragEnter(e) { 
 
    // this/e.target is the current hover target. 
 
    e.preventDefault(); 
 
    this.classList.add('over'); 
 
} 
 

 
function handleDragEnd(e) { 
 
    // this/e.target is the source node. 
 
    [].forEach.call(cols, function (col) { 
 
    col.classList.remove('over'); 
 
    }); 
 
} 
 

 
function handleDragLeave(e) { 
 
    this.classList.remove('over'); // this/e.target is previous target element. 
 
} 
 

 
// NEW FUNCTION! 
 
function handleDragOver(e) { 
 
    e.preventDefault(); 
 
} 
 

 
var cols = document.querySelectorAll('.target'); 
 
[].forEach.call(cols, function(col) { 
 
    col.addEventListener('dragenter', handleDragEnter, false); 
 
    col.addEventListener('dragleave', handleDragLeave, false); 
 
    col.addEventListener('dragover', handleDragOver, false); 
 
    col.addEventListener('drop', handleDrop, false); 
 
}); 
 

 
var mods = document.querySelectorAll('.module'); 
 
[].forEach.call(mods, function(mod){ 
 
    mod.addEventListener('dragstart',moduleDragStart,false); 
 
    // moved the dragend here, as it's applied to mod and not to col 
 
    mod.addEventListener('dragend', handleDragEnd, false); 
 
});
html,body { height: 100%; margin: 0px; padding: 0px; } 
 
.module { 
 
    height:50px; 
 
    width:50px; 
 
    background:red; 
 
    float:left; 
 
    margin:10px; 
 
} 
 
.target { float:left;height:100px; width:100px; background:white;margin:20px;border:1px solid;} 
 
.target.over { 
 
    border: 2px dashed #000; 
 
} 
 
#contentBlock { 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#fixedWidth{ 
 
    width: 300px; 
 
    float: left; 
 
    background: blue; 
 
    height:100%; 
 
} 
 
#theRest{ 
 
    background: green; 
 
    min-width:1000px; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#wrapper { 
 
    overflow:scroll; 
 
    height:100%; 
 
    width:100%; 
 
    float:left; 
 
} 
 

 
#contentHeader { 
 
    width:100%; 
 
    height:75px; 
 
    background: orange; 
 
    padding: 10px; 
 
} 
 

 
#logoBlock { 
 
    height:75px; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 

 
#userBlock { 
 
    height:75px; 
 
    background: white; 
 
    padding: 10px; 
 
} 
 

 
#modulesBlock { 
 
    background: yellow; 
 
    padding: 10px; 
 
}
<div id="wrapper"> 
 
    <div id="fixedWidth"> 
 
    <div id="logoBlock">logoblock</div> 
 
    <div id="userBlock">logoblock</div> 
 
    <div id="modulesBlock"> 
 
     <p>modulesBlock</p> 
 
     <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="contentHeader">content header</div> 
 
    <div id="contentBlock"> 
 

 
     <div class="target" id="target1" ></div> 
 
     <div class="target" id="target2" ></div> 
 

 
    </div> 
 
    </div> 
 
</div>

+0

請注意,我從山坳移動'dragend'事件國防部 –

+0

非常感謝您的及時幫助 - 我會在界! :P – user1517566

相關問題