4

jQueryではなく、javascriptとHTML5を使用してドラッグアンドドロップ機能を作成しようとしています。そして、何が悪いのかわかりません。これを長い間見ていて、どこが失敗したのかわかりません。誰かがそれを見つけることができますか？

    function doFirst(){
    mypic = document.getElementById('dragapple');
    mypic.addEventListener("dragstart", startDrag, false);

    leftbox = document.getElementById('leftbox');
    leftbox.addEventListener("dragenter", function(e){e.preventDefault}, false);
    leftbox.addEventListener("dragover", function(e){e.preventDefault}, false);
    leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e){
    var code = '<img id="dragapple" src="stealeripsum.png">';
    e.dataTransfer.setData('Text', code);
}
function dropped(e){
    e.preventDefault();
    leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener("load", doFirst, false);

ありがとう

4

4 に答える 4

3

.gegData('Text')または.getData('Text')？

function dropped(e){
   e.preventDefault();
   leftbox.innerHTML = e.dataTransfer.getData('Text');
}
于 2013-02-15T19:32:36.033 に答える
3

最後に私たちを捕まえるのはいつもささいなことです。「dragover」イベント リスナーの定義内で、e.PreventDefault に引数リストを提供する必要があります()。

leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);

そうすれば、ブラウザーはデフォルトのイベント応答 (ドロップを禁止する) を停止し、ドロップ操作を完了させます。これは、成功を示す愚かな jsFiddle デモです。青い四角は#dragapple.

于 2013-02-15T20:00:58.933 に答える
0

html5 のドラッグ アンド ドロップ API には、多くの奇妙なエッジ ケースがあります。ドラッグ アンド ドロップを簡単にする非常に一般的な低レベル API を作成しました。あなたの例でそれを行う方法は次のとおりです。

function doFirst(){
    var mypic = document.getElementById('dragapple')
    dripDrop.drag(mypic, {
      image: true,
      start: function(setData) {
        setData('Text', '<img id="dragapple" src="stealeripsum.png">')            
      }
    })

    var leftbox = document.getElementById('leftbox')
    dripDrop.drag(leftbox, {
      drop: function(data) {
        leftbox.innerHTML = data.Text        
      }
    })
}

window.addEventListener("load", doFirst, false);

ここでチェックしてください：https ://github.com/fresheneesz/drip-drop

于 2016-07-17T00:42:46.887 に答える
-1

ドラッグを受け取る要素に ondragover および ondrop イベントを作成する必要があり、ドラッグされた要素は draggable="true" である必要があります。

元：

<div ondragover="allowDrop(event);" ondrop="drop(event);">

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

function drop(x) {  x.preventDefault(); var data=x.dataTransfer.getData("text"); ... }
于 2013-02-15T19:42:05.430 に答える