如上圖片：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>可拖拽的元素組件</title>
<style>
#d1 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
#d2 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
</style>
</head>
<body>
<div id="d1">
<img id="myimg" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
<div id="d2"></div>
<script>
//獲取圖片及兩個div元素
var d1 = document.getElementById("d1"),
myimg = document.getElementById("myimg"),
d2 = document.getElementById("d2");
//給圖片綁定dragstart事件
myimg.addEventListener("dragstart",MyDragStart);
//給第二個div綁定dragover,drop兩個事件
d2.addEventListener("dragover",MyDragover);
d2.addEventListener("drop",MyDrop);
//給第一個div綁定dragover,drop兩個事件
d1.addEventListener("dragover",MyDragover);
d1.addEventListener("drop",MyDrop);
//圖片開始拖拽事件的處理函數
function MyDragStart(event){
var mydata = myimg.id;//保存ID值
var trans = event.dataTransfer;
trans.setData("text",mydata);
}
//該處理函數是為阻止頁面的默認行為
function MyDragover(){
event.preventDefault();
}
//drop處理函數
function MyDrop(event){
//
var trans = event.dataTransfer;//獲取數據保存對象
var mysrc = trans.getData("text");//圖片id
var ele = document.getElementById(mysrc);//獲取到圖片對象
if (ele != event.srcElement)//判斷圖片是否移動
{
event.srcElement.appendChild(ele.parentNode.removeChild(ele));//將img元素剪切到目標div中
}
trans.clearData("text");//清除數據
}
</script>
</body>
</html>
W3CSHOOL:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/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)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
H5 JQUERY：
<!DOCTYPE html> <html lang> <head> <meta charset="UTF-8"> <title>H5-tuozuai</title> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style> .dd {} .dd li{display:inline-block; padding:5px; margin:5px; border:1px solid red; text-align:center; cursor:move;} .dd li img {display:block;} .dd_over li {min-height:200px; margin:15px; border:1px dashed #ddd;} </style> </head> <body> <ul class="dd"> <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">abc</li> <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">123</li> <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">678</li> </ul> <ul class="dd_over"> <li></li> <li></li> <li></li> </ul> <script> var dd = $(".dd li"); var dd_over = $(".dd_over li"); //把被拖動的元素進行循環，並進行setData dd.each(function(index,val){ val.ondragstart = function(event){//拖拽剛開始時 event.dataTransfer.setData("key", $(val).html());//用key作為被移動的數據 console.log("start begin"); }; }); //設置DIV可接收 dd_over.each(function(index,val){ val.ondragover = function(event){ event.preventDefault(); console.log("o"); }; }); // 將被拖動元素放入DIV dd_over.each(function(index,val){ val.ondrop = function(event){ var key = event.dataTransfer.getData("key"); var html = $("<span style='border:solid 1px #f60; padding:5px; margin:5px;'>"+key+"</span>") //var html = $("<span style='border:solid 1px #f60; padding:5px; margin:5px;'>aa</span>") $(this).append(html); console.log("stop" + index); }; }); </script> </body> </html>
demo如圖：
http://www.cnblogs.com/Medeor/p/4963321.html
拖拽插件的話，如下：jquery.event.drag
http://threedubmedia.com/code/event/drop#demos