效果如图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽演示</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 960px;
height: auto;
/*border: 5px solid #ddd;*/
margin: 30px auto;
}
.box1{
width: 400px;
min-height: 190px;
float: left;
border: 5px solid #360;
}
.box2{
width: 400px;
min-height: 190px;
float: right;
border: 5px solid #630;
}
li{
list-style: none;
width: 100%;
height: 30px;
line-height: 30px;
text-indent: 30px;
border-bottom: 1px solid #fff;
background: #ddd;
color: #f00;
font:800 14px/30px "微软雅黑";
cursor: pointer;
}
.box3{
width: 140px;
height: 60px;
float: left;
}
.box3 li{
background: #999;
font-weight: 800;
width: 100px;
height: 30px;
margin: 50px auto;
color: #fff;
border-radius: 5px;
}
.active{
color: #fff;
background: #f00;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<ul>
<li>11111111</li>
<li>22222222</li>
<li>33333333</li>
<li>44444444</li>
</ul>
</div>
<div class="box3">
<li from=".box1" to=".box2">====></li>
<li from=".box2" to=".box1"><====</li>
</div>
<div class="box2">
<ul>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
(function($){
$(function(){
/*给每个元素添加draggable = true属性*/
$(".box1 ul li").each(function(index,element){
$(this).attr({"draggable":"true"});
/*设置一个开关用来设置元素拖到的时候为打开,停止拖动的时候就关闭*/
$(this).attr({"onOff":"false"});
$(this).get(0).ondragstart = function(ev){
// console.log("拖动开始");
$(this).attr({"onOff":"true"});
ev.dataTransfer.setData("name","");
// console.log($(this).attr("onOff"));
};
$(this).get(0).ondragend = function(){
$(this).attr({"onOff":"false"});
// console.log("拖动结束");
$(this).attr("class","");
};
});
/*设置接收区域*/
//拖拽进去阻止默认事件
$(".box2").get(0).ondragenter = function(e){
// console.log("拖拽进来");
e.preventDefault();
};
//拖拽在里面运动的时候阻止默认事件
$(".box2").get(0).ondragover = function(e){
// console.log("在里面运动");
e.preventDefault();
};
//拖拽离开的时候
$(".box2").get(0).ondragleave = function(e){
// console.log("拖拽离开");
e.preventDefault();
};
/*拖拽投放的时候*/
$(".box2").get(0).ondrop = function(e){
e.preventDefault();
//判断被拖的元素是不是属于拖动的情况下
$(".box1 ul li").each(function(){
if($(this).attr("onOff") == "true"){
$(".box2 ul").append($(this));
$(this).attr("class","");
};
});
$("box2 ul li").each(function(){
$(this).attr("class","");
});
/*对拖拽进去的元素去除拖拽及开关判断*/
// $(".box2 ul li").each(function(index,element){
// $(this).removeAttr("draggable").end().removeAttr("onOff");
// });
};
$(".box2 ul li").each(function(index,element){
$(this).attr({"draggable":"true"});
/*设置一个开关用来设置元素拖到的时候为打开,停止拖动的时候就关闭*/
$(this).attr({"onOff":"false"});
$(this).get(0).ondragstart = function(ev){
// console.log("拖动开始");
$(this).attr({"onOff":"true"});
ev.dataTransfer.setData("name","");
// console.log($(this).attr("onOff"));
};
$(this).get(0).ondragend = function(){
$(this).attr({"onOff":"false","class":""});
// console.log("拖动结束");
};
});
/*设置接收区域*/
//拖拽进去阻止默认事件
$(".box1").get(0).ondragenter = function(e){
// console.log("拖拽进来");
e.preventDefault();
};
//拖拽在里面运动的时候阻止默认事件
$(".box1").get(0).ondragover = function(e){
// console.log("在里面运动");
e.preventDefault();
};
//拖拽离开的时候
$(".box1").get(0).ondragleave = function(e){
// console.log("拖拽离开");
e.preventDefault();
};
/*拖拽投放的时候*/
$(".box1").get(0).ondrop = function(e){
e.preventDefault();
//判断被拖的元素是不是属于拖动的情况下
$(".box2 ul li").each(function(){
if($(this).attr("onOff") == "true"){
$(".box1 ul").append($(this));
};
$(this).attr("class","");
});
$(".box1 ul li").each(function(index,element){
$(this).attr("class","");
});
/*对拖拽进去的元素去除拖拽及开关判断*/
// $(".box1 ul li").each(function(index,element){
// $(this).removeAttr("draggable").end().removeAttr("onOff");
// });
};
/*---------------按钮切换js开始----------------*/
$(".box1 li,.box2 li").on("click",function(){
$(this).toggleClass("active");
});
$(".box3 li").click(function(){
/**
* $(this)==$(".box"3 li)
*
* */
$($(this).attr("from")).find("li.active").appendTo( $(this).attr("to")+" ul").attr("class","");
});
});
})(jQuery);
</script>
</html>