jquery拖动div交换位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>物品栏拖拽--Drag and Drop</title>
<meta name="description" content="物品栏拖拽，拖放" />
<meta name="keywords" content="物品栏拖拽，拖放" />
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px Verdana, Arial, "宋体", sans-serif;}
h1{font-size: 18px;font-family: 微软雅⿊;font-weight:normal;}
h2{clear:both;font-size: 16px;margin: 0;padding: 5px;border-bottom: 1px solid #69c;color: #1a1;font-family: 微软雅⿊;font-weight:normal;}
h3{margin: 0;font-size: 14px;font-family: 微软雅⿊;font-weight:normal;}
p{clear:both;}
.author{position:fixed;_position: absolute;right:20px;top:20px;}
ul{clear:both;float: left;}
/*格⼦拖放*/
.grid li{float: left;list-style: none;width: 98px;height: 86px;border: 1px solid #ccc;background: #eee;margin: 5px;padding: 1px;-moz-user-select:none;text-align:cent
.grid img{width:98px;height: 68px;padding-bottom:4px;}
.grid div{position: relative;}
.grid span{position: absolute;right:1px;top:75%;color: #fff;}
/*交换数据⽤的DIV*/
#tempBox{position: absolute;z-index:9999;}
/*单个拖放demo*/
/*#test{clear:both;width: 500px;margin: 30px;padding: 10px;line-height: 24px;background: #ccc;}*/
</style>
<script type="text/javascript" src="leapis/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div >
<h1>拖放，拖拽，仿物品栏拖拽，请点击 << <a href="javascript:void(0);" οnclick="startDrag()" >开始拖动</a> >> </h1>
<div >
<h2>酷站推荐   
<a href="javascript:void(0);" οnclick="addRow()" >添加⼀⾏</a>  
<a href="javascript:void(0);" οnclick="startDrag()" >开始拖动</a>
</h2>
<div id="item" >
<ul class="drop grid" id="g1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div >
<h2>已选中⽹站</h2>
<ul class="drag grid">
<li id="1"><div><img src="img1.cacheease/img09/logo/logo.gif" alt="" width="175" height="50" title="" />⽹易</div>
</li>
<li id="2"><div><img src="mat1.qq/www/iskin/skin4/expotclogo.gif" alt="" width="100" height="45" title="" />腾讯</div>          </li>
<li id="3"><div><img src="i1.sinaimg/home/deco/2009/0330/logo_home.gif" alt="" title="" />新浪</div>
</li>
<li id="4"><div><img src="le/intl/zh-CN/images/logo_cn.gif" alt="" title="" />⾕歌</div>
</li>
<li id="5"><div><img src="/uploads/allimg/c090630/12463QO5220-1J360.jpg" alt="" title="" />搜狐</div>
</li>
<li id="6"><div><img src="www.baidu/img/baidu_logo.gif" alt="" title="" />百度</div>
</li>
<li id="7"><div><img src="cn.yimg/hp/0910/img/yahoo_logo2.gif" alt="" title="" />雅虎</div>
</li>
<li id="8">
<div><img src="assets.taobaocdn/img/chl/fp/logo080808.png" alt="" title="" />淘宝⽹</div>
</li>
<li id="8">
<div><img src="storage.aliyun/tizhimei/pins/405_m.jpg" alt="" title="" />淘宝⽹</div>
</li>
<li id="8">
<div><img src="storage.aliyun/tizhimei/pins/247_s.jpg" alt="" title="" />淘宝⽹</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var r=null;
window.οnlοad=function()
{
ElementById('item').innerHTML;
}
function addRow() {
var ElementById('item')
obj.innerHTML=obj.innerHTML+r;
}
function startDrag()
{
//.drag li ⾥⾯的元素对应的放置位置是 .drop li, 完成后回调change函数，默认限制拖动范围是窗⼝内部
$('.drag li').Drag({drop:'.drop li,.drag li',finish:change});
//.drag li ⾥⾯的元素对应的放置位置是 .drop li和.drag li(⾃⾝), 完成后回调change函数，默认限制拖动范围是窗⼝内部
$('.drop li').Drag({drop:'.drop li, .drag li',finish:change});
//ElementById('ravl').ElementById('item').innerHTML;
}
<!--
//拖放插件DragDrop
$.fn.Drag=function (options) {
var defaults={
limit : window,//是否限制拖放范围，默认限制当前窗⼝内
drop:false,//是否drop
handle:false,//拖动⼿柄
finish:function () {}//回调函数
};
var options=$.extend(defaults,options);
this.X=0;//初始位置
this.Y=0;
this.dx=0;//位置差值
this.dy=0;
var This=this;
var ThisO=$(this);//被拖⽬标
var thatO;
if (options.drop) {
var ThatO=$(options.drop);//可放下位置
ThisO.find('div').css({cursor:'move'});
var tempBox=$('<div id="tempBox" class="grid"></div>');
}else {
options.handle ? ThisO.find(options.handle).css({cursor:'move','-moz-user-select':'none'}) : ThisO.css({cursor:'move','-moz-user-select':'none'});  }
//拖动开始
this.dragStart=function (e) {
var cX=e.pageX;
var cY=e.pageY;
if (options.drop) {
ThisO=$(this);
if (ThisO.find('div').length!=1) {return}//如果没有拖动对象就返回
This.X=ThisO.find('div').offset().left;
This.Y=ThisO.find('div').offset().top;
tempBox.html(ThisO.html());
ThisO.html('');
$('body').append(tempBox);
tempBox.css({left:This.X,top:This.Y});
}else {
This.X=ThisO.offset().left;
This.Y=ThisO.offset().top;
ThisO.css({margin:0})
}
jquery弹出div窗口This.dx=cX-This.X;
This.dy=cY-This.Y;
if (!options.drop) {ThisO.css({position:'absolute',left:This.X,top:This.Y})}
$(document).mousemove(This.dragMove);
$(document).mouseup(This.dragStop);
if ($.browser.msie) {ThisO[0].setCapture();}//IE,⿏标移到窗⼝外⾯也能释放
}
//拖动中
this.dragMove=function (e) {
var cX=e.pageX;
var cY=e.pageY;
if (options.limit) {//限制拖动范围
//容器的尺⼨
var L=$(options.limit)[0].offsetLeft ? $(options.limit).offset().left : 0;
var T=$(options.limit)[0].offsetTop ? $(options.limit).offset().top : 0;
var R=L+$(options.limit).width();
var B=T+$(options.limit).height();
//获取拖动范围
var iLeft=cX-This.dx, iTop=cY-This.dy;
//获取超出长度
var iRight=iLeft+parseInt(ThisO.innerWidth())-R, iBottom=iTop+parseInt(ThisO.innerHeight())-B;
//alert($(window).height())
//先设置右下, 再设置左上
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(L > iLeft) iLeft = L;
if(T > iTop) iTop = T;
if (options.drop) {
tempBox.css({left:iLeft,top:iTop})
}else {
ThisO.css({left : iLeft,top : iTop})
}
}else {
//不限制范围
if (options.drop) {
tempBox.css({left:cX-This.dx,top:cY-This.dy})
}else {
ThisO.css({left:cX-This.dx,top:cY-This.dy});
}
}
}
}
//拖动结束
this.dragStop=function (e) {
if (options.drop) {
var flag=false;
var cX=e.pageX;
var cY=e.pageY;
var oLf=ThisO.offset().left;
var oRt=oLf+ThisO.width();
var oTp=ThisO.offset().top;
var oBt=oTp+ThisO.height();
if (!(cX>oLf && cX<oRt && cY>oTp && cY<oBt)) {//如果不是在原位
for (var i=0; i<ThatO.length; i++) {
var XL=$(ThatO[i]).offset().left;
var XR=XL+$(ThatO[i]).width();
var YL=$(ThatO[i]).offset().top;
var YR=YL+$(ThatO[i]).height();
if (XL<cX && cX<XR && YL<cY && cY<YR) {//到拖放⽬标交换位置
var newElm=$(ThatO[i]).html();
$(ThatO[i]).html(tempBox.html());
ThisO.html(newElm);
thatO=$(ThatO[i]);
flag=true;
break;//⼀旦到就终⽌循环
}
}
}
if (!flag) {//如果不到拖放位置，归回原位
tempBox.css({left:This.X,top:This.Y});
ThisO.html(tempBox.html());
}
}
$(document).unbind('mousemove');
$(document).unbind('mouseup');
options.finish(e,ThisO,thatO);
if ($.browser.msie) {ThisO[0].releaseCapture();}
}
//绑定拖动
options.handle ? ThisO.find(options.handle).mousedown(This.dragStart) : usedown(This.dragStart);
//IE禁⽌选中⽂本
//selectstart=function(){return false;}
}
//下⾯是例⼦
//.drag li ⾥⾯的元素对应的放置位置是 .drop li, 完成后回调change函数，默认限制拖动范围是窗⼝内部
//$('.drag li').Drag({drop:'.drop li',finish:change});
//.drag li ⾥⾯的元素对应的放置位置是 .drop li和.drag li(⾃⾝), 完成后回调change函数，默认限制拖动
范围是窗⼝内部 //$('.drop li').Drag({drop:'.drop li, .drag li',finish:change});
//$('#test').Drag({handle:'h2',finish:change});//不限制拖动范围可设置limit:false
var change=function (e,oldElm,newElm) {
//alert(newElm)
}
//-->
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。