首页 新闻 赞助 找找看

jquery easy ui实现拖动互换位置

0
悬赏园豆:100 [已解决问题] 解决于 2014-03-14 18:43

我想做一个表格,然后拖动表格互换位置,用jquery easy ui 怎么做啊,求各位大神给个例子

C_林先森的主页 C_林先森 | 初学一级 | 园豆:60
提问于:2014-03-11 22:06
< >
分享
最佳答案
0

可以实现onStopDrag,对各自的 left和top 进行交换

收获园豆:100
Yu | 专家六级 |园豆:12980 | 2014-03-12 12:39

<!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 | 园豆:12980 (专家六级) | 2014-03-12 13:09

@Yu: 大概这样 你可以再完善一下

Yu | 园豆:12980 (专家六级) | 2014-03-12 13:11
其他回答(1)
0

jqueryui直接就有插件支持,你下下来就能看见DEMO

吴瑞祥 | 园豆:29449 (高人七级) | 2014-03-12 09:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册