0

Web サイトにドロップ アンド ドラッグ機能を追加したいと考えています。私はまだこれについて学んでおり、ウェブサイトに追加する前にプロトタイプを実装したいと考えています.

W3Schools の例を見つけましたが、Web サイトで問題なく動作します。

この例を JSFiddle に移動して、いじってみました。残念ながら、この例はそこでは機能しません。問題が何であるかを知っている人はいますか？

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 タグにクロージングを追加しました。

PS: JQuery はできるだけ避けたいです。

4

2 に答える 2

0

ここで機能するフィドルオプションのラップボディを変更しないでください

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-02T08:26:17.787 に答える
0

これは、javascript インクルージョンの問題です。

フレームワークと拡張機能で、2 番目のドロップダウンをNo wrap - in <head>

私のために働いた。

于 2013-10-02T08:26:34.980 に答える