代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Js
】
移动li行数据,点击上移下移x
作者:
一然
/ 发布于
2016/6/15
/
739
移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)
<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title>JS移动li行数据,点击上移下移</title> <style type="text/css"> * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:500px;list-style:none;} #pCon li {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon li a{margin-left:5px;text-decoration:none;} #pCon li a:hover{cursor:hand;} .context {float:left;display:inline;} .control {float:right;display:inline;} .control img {width:50px;height:12px;overflow:hidden;float:left;display:inline;} hr {margin:30px auto;} #pCon1 {width:500px;list-style:none;} #pCon1 li {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon1 li a{margin-left:5px;text-decoration:none;} #pCon1 li a:hover{cursor:hand;} </style> </head> <body> <div class="content"> <ul id="pCon1"> <li id="id1"><div class="context">测试数据你相信么A</div></li> <li id="id2"><div class="context">测试数据你相信么B</div></li> <li id="id3"><div class="context">测试数据你相信么C</div></li> </ul> </div> <script> function moveSonU(tag,pc){ var tagPre=get_previoussibling(tag); var t=document.getElementById(pc); if(tagPre!=undefined){ t.insertBefore(tag,tagPre); } } function moveSonD(tag){ var tagNext=get_nextsibling(tag); if(tagNext!=undefined){ insertAfter(tag,tagNext); } } function get_previoussibling(n){ if(n.previousSibling!=null){ var x=n.previousSibling; while (x.nodeType!=1) { x=x.previousSibling; } return x; } } function get_nextsibling(n){ if(n.nextSibling!=null){ var x=n.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } return x; } } //DOM没有提供insertAfter()方法 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { // 如果最后的节点是目标元素,则直接添加。因为默认是最后 parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); //如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面 } } function myOrder(myList,m,mO,mT){ //myList为ul的id值,m为0显示文字,m为1显示图片,mO、mT为文字或图片内容 var pCon=document.getElementById(myList); var pSon=pCon.getElementsByTagName("li"); for(i=0;i<pSon.length;i++){ var conTemp=document.createElement("div"); conTemp.setAttribute("class","control"); var clickUp=document.createElement("a"); var clickDown=document.createElement("a"); if(m==0){ var upCon=document.createTextNode(mO); var downCon=document.createTextNode(mT); }else{ var upCon=document.createElement("img"); var downCon=document.createElement("img"); upCon.setAttribute("src",mO); downCon.setAttribute("src",mT); } clickUp.appendChild(upCon); clickUp.setAttribute("href","#"); clickDown.appendChild(downCon); clickDown.setAttribute("href","#"); pSon[i].appendChild(conTemp); conTemp.appendChild(clickUp); conTemp.appendChild(clickDown); clickUp.onclick=function(){ moveSonU(this.parentNode.parentNode,myList); } clickDown.onclick=function(){ moveSonD(this.parentNode.parentNode); } } } myOrder("pCon1",0,"上移","下移"); </script> </body> </html>
试试其它关键字
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
一然
贡献的其它代码
(
18
)
.
查询昨天的日期
.
检查jar包中是否包含某个类和查看hbase环境变量
.
C分鱼问题
.
目录文件监控
.
获取ResultSet记录行数 、 列数
.
动态读取JSON解析键值对
.
存储过程带参数 按时间创建相应的表
.
JsonHelper
.
守护进程带start/stop/restart/stat功能
.
根据条件更改链接的可用和颜色
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3