jquery easy ui实现拖动互换位置
0
最佳答案
0
可以实现onStopDrag，对各自的 left和top 进行交换
收获园豆：100
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<table id="dd1"><tr><td>1</td></tr></table>
<table id="dd2"><tr><td>2</td></tr></table>
<table id="dd3"><tr><td>3</td></tr></table>
<script>
var dargElementName='table';
$(function(){
var dds=$(dargElementName);
$(dds).each(function(i)
{
$(dds[i]).draggable({
onStopDrag:onMyStopDarg
});
});
});
function onMyStopDarg(e)
{
var that=this;
var n=-1;
var ex=parseFloat($(this).css('left').replace('px',''));
var ey=parseFloat($(this).css('top').replace('px',''));
var ew=parseFloat($(this).css('width').replace('px',''));
var eh=parseFloat($(this).css('height').replace('px',''));
var x=parseFloat(e.data.startLeft);
var y=parseFloat(e.data.startTop);
var left=-1;
var top=-1;
var dds=$(dargElementName);
$(dds).each(function(i){
if(that.id!=dds[i].id && n==-1)
{
/*目标点坐标和宽高*/
left=parseFloat($(dds[i]).css('left').replace('px',''));
top=parseFloat($(dds[i]).css('top').replace('px',''));
var width=parseFloat($(dds[i]).css('width').replace('px',''));
var height=parseFloat($(dds[i]).css('height').replace('px',''));
/*四个点坐标比较*/
if(ex>=left && ex<=left+width && ey>=top && ey<=top+height){
n=i;
}
else if(ex+ew>=left && ex+ew<=left+width && ey>=top && ey<=top+height){
n=i;
}
else if(ex>=left && ex<=left+width && ey+eh>=top && ey+eh<=top+height){
n=i;
}
else if(ex+ew>=left && ex+ew<=left+width && ey+eh>=top && ey+eh<=top+height){
n=i;
}
}
});
if(n!=-1)
{
/*交换位置*/
$(dds[n]).css('left',x);
$(dds[n]).css('top',y);
$(this).css('left',left);
$(this).css('top',top);
}
}
</script>
</body>
</html>
@Yu: 大概这样 你可以再完善一下
其他回答(1)
0
jqueryui直接就有插件支持,你下下来就能看见DEMO
