W3School拖放示例不能在JSFiddle中工作

我想在網站上添加拖放功能。我仍然在學習這一點，並希望在將其添加到我的網站之前實施原型。W3School拖放示例不能在JSFiddle中工作

我找到了W3Schools example，它在他們的網站上正常工作。

我試圖將這個例子移動到JSFiddle來擺弄它。不幸的是，這個例子不起作用there。有誰知道這個問題是什麼？

HTML

<body> 
<p>Drag image into the rectangle:</p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <img id="drag1" src="http://iconbug.com/data/29/128/1cc6b61217921b624db0cd6cfd6d1360.png" draggable="true" ondragstart="drag(event)" /> 

</body>

的Javascript

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

function drag(ev) { 
    ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); 
}

我不得不使用可將圖像從一個公共URL。我還爲img標籤添加了一個結束/。

措施：我想避免儘可能多的JQuery。

來源

2013-10-02 JVerstry

我爲什麼不感到驚訝？ W3Schools是[可怕的資源]（http://www.w3fools.com/）來學習Web開發，請嘗試[MDN]（https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop）。 – Pavlo

改變它的小提琴選項中的無包裹身體（如在網站中）http://jsfiddle.net/vinodlouis/zx8Ty/ –

謝謝維諾。如果您創建答案，我會批准它！ – JVerstry

變化無包裹體在撥弄選擇它的工作原理HERE

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

function drag(ev) { 
ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) { 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
}

來源

2013-10-02 08:26:17

此代碼與問題中的完全相同。看起來問題出在小提琴本身。你能擴展嗎？ – Pavlo

這是一個JavaScript列入問題。

在框架和擴展嘗試設置第二個下拉到No wrap - in <head>

爲我工作。

來源

2013-10-02 08:26:34 dorianm

W3School拖放示例不能在JSFiddle中工作

回答

相關問題