如上图片：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>可拖拽的元素组件</title>
<style>
#d1 {800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
#d2 {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; 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