ドラッグ＆ドロップHTML5が機能しませんか？

私はhtml5のドラッグアンドドロップを理解しようとしていますが、ドラッグするとそれを受け取り、ドラッグされた要素を受け入れると思われる要素を受け入れることができます。しかし、私はondragやondragenterを得ることができません。少なくとも、これらのイベントが呼び出す関数は、私が間違っていることを本当に確信していません。ドラッグ＆ドロップHTML5が機能しませんか？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Week 3 Drag and Drop</title> 
<link rel="stylesheet" type="text/css" href="Week3DragAndDropCSS.css"> 
<script src="Week3DragAndDropJS.js"></script> 
</head> 
<body> 
<header> 
    <h1>Week 3 Drag and Drop</h1> 
</header> 

<div style="height:200px;width:200px;background: red"  
    id="obj1"draggable="true"></div> 
<div style="height:200px;width:200px;background: 
    green"id="obj2"draggable="true"></div> 
<div style="height:200px;width:200px;background: orange" 
    id="obj3"draggable="true"></div>  
<div style="height:200px;width:200px;background-image: url 
    ('trash.png');background-repeat: no-repeat;" id="trashCan" 
    ondragover="allowDrop(event)" ondragenter="setBorder(event,'5px')" 
    ondragleave="setBorder(event,'2px')" ondrop="drop(event)"></div> 




<footer> 

</footer> 

    </body> 

    </html>

次に、ここでは私のjsです：

function drag(evt){ 
evt.dataTransfer.setData("color", ev.target.background); 
} 
function allowDrop(evt){ 
evt.preventDefault(); 
} 
function drop(evt){ 
evt.preventDefault(); 
var color = evt.dataTransfer.getData("color"); 
evt.currentTarget.style.background = color; 

} 
function setBorder(evt,size){ 
evt.currentTarget.border = (size +"solid black"); 
}

出典

2016-04-20 Dakota Miller

申し訳ありませんが、誰もreffer透過性jsのコードが間違っていたファイルでした。私は質問でそれを更新しました。 –

マイナーな文法ミス、次のフィドル

function drag(evt){ 
 

 
evt.dataTransfer.setData("color", 
 
evt.target.style.backgroundColor); 
 
} 
 
function allowDrop(evt){ 
 
evt.preventDefault(); 
 
} 
 
function drop(evt){ 
 
evt.preventDefault(); 
 
var color = evt.dataTransfer.getData("color"); 
 
evt.currentTarget.style.background = color; 
 

 
} 
 
function setBorder(evt,size){ 
 
evt.currentTarget.style.border = (size +" solid black"); 
 
}

<body> 
 
<header> 
 
    <h1>Week 3 Drag and Drop</h1> 
 
</header> 
 

 
<div style="height:200px;width:200px;background: red"  
 
    id="obj1"draggable="true" ondragstart="drag(event)"></div> 
 
<div style="height:200px;width:200px;background: 
 
    green"id="obj2"draggable="true" ondragstart="drag(event)"></div> 
 
<div style="height:200px;width:200px;background: orange" 
 
    id="obj3"draggable="true" ondragstart="drag(event)"></div>  
 
<div style="height:200px;width:200px;background-image: url 
 
    ('trash.png');background-repeat: no-repeat;" id="trashCan" 
 
    ondragover="allowDrop(event)" ondragenter="setBorder(event,'5px')" 
 
    ondragleave="setBorder(event,'2px')" ondrop="drop(event)"></div> 
 

 

 

 

 
<footer> 
 

 
</footer> 
 

 
    </body>

出典

2016-04-20 02:31:46

は、最初のエラーを修正してください。ここで

function drop(evt){ // define parameter evt 
    ... 
} 
function setBorder(evt,size){ 
    evt.currentTarget.border = (size + "solid black"); // use + to concat 
}

出典

2016-04-20 01:36:48

私は（それはおそらくあなたがこのについての学習をやっているものに類似していた）を経て、過去のチュートリアルから書かれたものです：

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

私が欠けていると信じて何あなたのドロップ関数からは、appendChild（）の呼び出しがあります。これは、要素をある場所から別の場所に実際にドラッグする（前の回答で指摘された構文エラーに加えて）ものです。

出典

2016-04-20 01:37:13

ドラッグ＆ドロップHTML5が機能しませんか？

答えて

関連する問題