使用JavaScript拖放
[英]Drag n Drop using JavaScript
問題描述
我已經開始學習JavaScript。 我已經嘗試了以下將圖像拖放到名為“ dropTarget1”的拖放區中的方法； 圖片不可拖動。 能否請您看看我的代碼，並告訴我我做錯了什么。
var draggable=document.getElementById('dragMe1'); draggable.addEventListener('dragstart',dragStart,false); var droptarget=document.getElementById("dropTarget1"); droptarget.addEventListener('dragenter',dragEnter,false); droptarget.addEventListener('dragover',dragOver,false); droptarget.addEventListener('dragleave',dragLeave,false); droptarget.addEventListener('drop',drop,false); function dragStart(event){ event.dataTransfer.setData('text/html', event.currentTarget.id); } function dragOver(event) { event.preventDefault(); return false; } function drop(event) { var dragMe1=document.createElement("img"); var data = event.dataTransfer.getData('text/html'); event.preventDefault(); event.stopPropagation(); dragMe1.src=data; droptarget.appendChild('dragMe1'); return false; }
#dropTarget1{ width:300px; height:300px; background-color:#DBF272; } #dragMe1{ width:300px; } #dragMe1 img{ padding-left:45px; }
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="myStyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="dropTarget1"></div> <img id="dragMe1" src="logo1.png" draggable="true" > <script src="myDragnDrop.js"> </script> </body> </html>
2 個解決方案
解決方案1
0 2016-10-13 02:48:46
您的JavaScript代碼應如下所示（注釋中的說明）；
var draggable=document.getElementById('dragMe1');
var droptarget=document.getElementById("dropTarget1");
var newIm = document.createElement("img"); //Create new image element
/*Subscribe to dragover event.
This event fires when a user drag the image over the target */
droptarget.addEventListener('dragover',dragOver,false);
/*Subscribe to drop event.
This event fires when a user drop the image on the target */
droptarget.addEventListener('drop',drop,false);
function dragOver(event) {
event.stopPropagation(); //Prevent further drop events from bubbling up the DOM tree
event.preventDefault(); //Prevent the default behavior of the browser when dropping something on it
event.dataTransfer.dropEffect = "move"; //Specify the feedback that the user receives when a user drags over the target. It can be copy, link, or none
return false;
}
function drop(event) {
var data = event.dataTransfer.getData('text/plain'); //To retrieve the image URL
event.preventDefault();
event.stopPropagation();
newIm.src=data; //Write the image URL into the src attribute of newIm
droptarget.appendChild(newIm); //Add the new created image to the target element
document.body.removeChild(draggable); //Remove the original image as you're dragging and dropping (moving)
return false;
}
您無需訂閱諸如dragenter之類的事件，只需要訂閱dragover和drop事件。
解決方案2
0 2016-10-13 05:43:01
如果要使用jQuery，則此Draggable | jquery UI可能是一個非常簡單的選項。
JavaScript拖放問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.