jquery实现拖动排序

最新推荐文章于 2025-06-22 09:24:49 发布
转载最新推荐文章于 2025-06-22 09:24:49 发布 · 1.4k 阅读
文章标签：
#jquery #移动 #div #排序 #拖拽
.net jquery 专栏收录该内容
3 篇文章
订阅专栏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div.drag{
border:1px solid black;
position:static;
background:#66eeaa;
width:200px;
height:50px;
float:left;
margin:2px;
}
div.helper{
border:1px dashed black;
position:absolute;
width:200px;
height:50px;
}
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".drag").mousedown(function(e){
var oriX,oriY;   //要移动的DIV的初始值；
var setX,setY;   //鼠标按下处和DIV的左上角的距离；
var divX,divY;   //拖拽DIV的左上角坐标；
var pTX,pTY,pBX,pBY; //一个DIV的的左上和右下角坐标；
var dragFlag; //拖动的标志位；
var $theDiv=$(this); //要拖动的DIV对象
var $targDiv=null;   //选中的DIV被拖动到的目标DIV
// var $helpDiv=$(this).clone(); //辅助DIV对象

oriX=$(this).offset().left;   
oriY=$(this).offset().top;
setX=e.clientX-oriX;
setY=e.clientY-oriY;

$(document).mousemove(function(e){
dragFlag=true;
divX=e.clientX-setX;
divY=e.clientY-setY;

$theDiv.attr("class","helper");
// $helpDiv.appendTo("body");
$theDiv.css({"left":divX,"top":divY});

//防止拖动中选中
if(document.selection)
{//IE ,Opera
if(document.selection.empty)
document.selection.empty();//IE
else //Opera
document.selection = null;
}
else if(window.getSelection)//FF,Safari
{
window.getSelection().removeAllRanges();
}
});

$(document).mouseup(function(e){
$(document).unbind("mousemove");
if(dragFlag)
{
$(".drag").each(function(){
pTY=$(this).offset().top;
pTX=$(this).offset().left;
pBY=$(this).offset().top+$(this).height();
pBX=$(this).offset().left+$(this).width();
if(e.clientY>pTY&&e.clientX>pTX&&e.clientY<pBY&&e.clientX<pBX)
{
if($(this).attr("id")!=$theDiv.attr("id"))
//移动动画结束后移动DIV
$targDiv=$(this);
oriX=pTX;
oriY=pTY;
return false;
}
});
//移动动画
$theDiv.animate(
{left:oriX,top:oriY},
200,
function(){
if($targDiv!=null)
$targDiv.before($theDiv);
$theDiv.attr("class","drag"); 
}
);
}
dragFlag=false;
$(document).unbind("mouseup");
});
});
});
</script>
</HEAD>

<BODY>
<div id="drag1" class="drag">11111</div>
<div id="drag2" class="drag">22222</div>
<div id="drag3" class="drag">33333</div>
<div id="drag4" class="drag">44444</div>
<div id="drag5" class="drag">55555</div>
<div id="drag6" class="drag">66666</div>
<div id="drag7" class="drag">77777</div>
<div id="drag8" class="drag">88888</div>
<div id="drag9" class="drag">99999</div>
<div id="drag0" class="drag">00000</div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div.drag{
border:1px solid black;
position:static;
background:#66eeaa;
width:200px;
height:50px;
float:left;
margin:2px;
}
div.helper{
border:1px dashed black;
position:absolute;
width:200px;
height:50px;
}
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".drag").mousedown(function(e){
var oriX,oriY;   //要移动的DIV的初始值；
var setX,setY;   //鼠标按下处和DIV的左上角的距离；
var divX,divY;   //拖拽DIV的左上角坐标；
var pTX,pTY,pBX,pBY; //一个DIV的的左上和右下角坐标；
var dragFlag; //拖动的标志位；
var $theDiv=$(this); //要拖动的DIV对象
var $targDiv=null;   //选中的DIV被拖动到的目标DIV
// var $helpDiv=$(this).clone(); //辅助DIV对象

oriX=$(this).offset().left;   
oriY=$(this).offset().top;
setX=e.clientX-oriX;
setY=e.clientY-oriY;

$(document).mousemove(function(e){
dragFlag=true;
divX=e.clientX-setX;
divY=e.clientY-setY;

$theDiv.attr("class","helper");
// $helpDiv.appendTo("body");
$theDiv.css({"left":divX,"top":divY});

//防止拖动中选中
if(document.selection)
{//IE ,Opera
if(document.selection.empty)
document.selection.empty();//IE
else //Opera
document.selection = null;
}
else if(window.getSelection)//FF,Safari
{
window.getSelection().removeAllRanges();
}
});

$(document).mouseup(function(e){
$(document).unbind("mousemove");
if(dragFlag)
{
$(".drag").each(function(){
pTY=$(this).offset().top;
pTX=$(this).offset().left;
pBY=$(this).offset().top+$(this).height();
pBX=$(this).offset().left+$(this).width();
if(e.clientY>pTY&&e.clientX>pTX&&e.clientY<pBY&&e.clientX<pBX)
{
if($(this).attr("id")!=$theDiv.attr("id"))
//移动动画结束后移动DIV
$targDiv=$(this);
oriX=pTX;
oriY=pTY;
return false;
}
});
//移动动画
$theDiv.animate(
{left:oriX,top:oriY},
200,
function(){
if($targDiv!=null)
$targDiv.before($theDiv);
$theDiv.attr("class","drag"); 
}
);
}
dragFlag=false;
$(document).unbind("mouseup");
});
});
});
</script>
</HEAD>

<BODY>
<div id="drag1" class="drag">11111</div>
<div id="drag2" class="drag">22222</div>
<div id="drag3" class="drag">33333</div>
<div id="drag4" class="drag">44444</div>
<div id="drag5" class="drag">55555</div>
<div id="drag6" class="drag">66666</div>
<div id="drag7" class="drag">77777</div>
<div id="drag8" class="drag">88888</div>
<div id="drag9" class="drag">99999</div>
<div id="drag0" class="drag">00000</div>
</BODY>
</HTML>