87,992
社区成员
发帖
与我相关
我的任务
分享请教各种大师，关于上下移动的问题
现在遇到这样一个问题，请各位赐教思路 。
页面中 ，会根据数据库数据动态读取数据 。数据的个数不确定 。所以前台要显示的控件的个数也不确定 。每一个数据库中的值对应前台的一个控件 。然后问题出来了 针对这些控件 ，还有上移和下移的功能 ，把所对应的列位置改变 。
如下图所示：
页面中 ，会根据数据库数据动态读取数据 。数据的个数不确定 。所以前台要显示的控件的个数也不确定 。每一个数据库中的值对应前台的一个控件 。然后问题出来了 针对这些控件 ，还有上移和下移的功能 ，把所对应的列位置改变 。
如下图所示：
...全文
请发表友善的回复…
发表回复
NANU-NANA 2013-04-22
- 打赏
- 举报
extjs 里的 drag drop 功能
似梦飞花 2013-04-22
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function getPrevious(obj){
var pre=obj.previousSibling;
while(pre&&!pre.tagName){
pre=pre.previousSibling;
}
if(!pre){
pre=null;
}
return pre;
}
function getNext(obj){
var next=obj.nextSibling;
while(next&&!next.tagName){
next=next.nextSibling;
}
if(!next){
next=null;
}
return next;
}
function up(obj){
var p=obj.parentNode.parentNode;
var pre=getPrevious(p);
if(pre){
var pp=p.parentNode;
pp.insertBefore(p,pre);
}
}
function down(obj){
var p=obj.parentNode.parentNode;
var pp=p.parentNode;
var next=getNext(p);
if(next){
next=getNext(next);
if(next){
pp.insertBefore(p,next);
}else{
pp.appendChild(p);
}
}else{
pp.appendChild(p);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td><input type="button" value="上移" onclick="up(this)"></td>
<td><input type="button" value="下移" onclick="down(this)"></td>
</tr>
<tr>
<td>2</td>
<td><input type="button" value="上移" onclick="up(this)"></td>
<td><input type="button" value="下移" onclick="down(this)"></td>
</tr>
<tr>
<td>3</td>
<td><input type="button" value="上移" onclick="up(this)"></td>
<td><input type="button" value="下移" onclick="down(this)"></td>
</tr>
</table>
</body>
</html>
上边的有错误
似梦飞花 2013-04-22
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function getPrevious(obj){
var pre=obj.previousSibling;
if(pre&&!pre.tagName){
pre=pre.previousSibling;
}else if(!pre){
pre=null;
}
return pre;
}
function getNext(obj){
var next=obj.nextSibling;
if(next&&!next.tagName){
next=next.nextSibling;
}else if(!next){
next=null;
}
return next;
}
function up(obj){
var p=obj.parentNode.parentNode;
var pre=getPrevious(p);
if(pre){
var pp=p.parentNode;
pp.insertBefore(p,pre);
}
}
function down(obj){
var p=obj.parentNode.parentNode;
var pp=p.parentNode;
var next=getNext(p);
if(next){
next=getNext(next);
if(next){
pp.insertBefore(p,next);
}else{
pp.appendChild(p);
}
}else{
pp.appendChild(p);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td><input type="button" value="上移" onclick="up(this)"></td>
<td><input type="button" value="下移" onclick="down(this)"></td>
</tr>
<tr>
<td>2</td>
<td><input type="button" value="上移" onclick="up(this)"></td>
<td><input type="button" value="下移" onclick="down(this)"></td>
</tr>
<tr>
<td>3</td>
<td><input type="button" value="上移" onclick="up(this)"></td>
<td><input type="button" value="下移" onclick="down(this)"></td>
</tr>
</table>
</body>
</html>
大体类似这样试试
似梦飞花 2013-04-22
- 打赏
- 举报
insertBefore 找到点击按钮的父元素tr 然后用inserBefore将这个tr插入到上一个tr(previousSibling)之前试试
functionsub 2013-04-22
- 打赏
- 举报
这有什么难的？
点上移的时候取到本身这一行，跟上面那一行，把本身insert到上面那一行前面就行了。
点下移的时候取到本身这一行，跟下面那一行，把本身insert到下面那一行后面就行了（这里可以再取到本身这一行的下面第二行，把本身insert到下面第二行的前面，跟点上移可以直接公用一个方法了）。
当然移的时候发请求到后来，存储新的位置信息。
