如上图片：
<!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"></li>
<li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif"></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