原生JS 实现元素排序

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html>
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6 <title></title>
  7 <style type="text/css">
  8 *{ margin: 0; padding: 0; -moz-user-select:none;}
  9 ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}
 10 li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}
 11 li:hover{ background: #bdb76b; cursor: move;}
 12 </style>
 13 </head>
 14 <body>
 15 <ul id="outer_wrap">
 16 <li>第一条</li>
 17 <li>第二条</li>
 18 <li>第三条</li>
 19 <li>第四条</li>
 20 <li>第五条</li>
 21 <li>第六条</li>
 22 <li>第七条</li>
 23 <li>第八条</li>
 24 </ul>
 25 <script type="text/javascript">
 26 function $(id){
 27 return document.getElementById(id);
 28 }
 29 //获取鼠标位置
 30 function getMousePos(e){
 31 return {
 32 x : e.pageX || e.clientX + document.body.scrollLeft,
 33 y : e.pageY || e.clientY + document.body.scrollTop
 34 }
 35 }
 36 //获取元素位置
 37 function getElementPos(el){
 38 return {
 39 x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)[‘x‘] : el.offsetLeft,
 40 y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)[‘y‘] : el.offsetTop
 41 }
 42 }
 43 //获取元素尺寸
 44 function getElementSize(el){
 45 return {
 46 width : el.offsetWidth,
 47 height : el.offsetHeight
 48 }
 49 }
 50 //禁止选择
 51 document.onselectstart = function(){
 52 return false;
 53 }
 54 //判断是否有挪动
 55 var MOVE = {};
 56 MOVE.isMove = false;
 57
 58 //就是创建的标杆
 59 var div = document.createElement(‘div‘);
 60 div.style.width = ‘400px‘;
 61 div.style.height = ‘1px‘;
 62 div.style.fontSize = ‘0‘;
 63 div.style.background = ‘red‘;
 64
 65 var outer_wrap = $(‘outer_wrap‘);
 66 outer_wrap.onmousedown = function(event){
 67 //获取列表顺序
 68 var lis = outer_wrap.getElementsByTagName(‘li‘);
 69 for(var i = 0; i < lis.length; i++){
 70 lis[i][‘pos‘] = getElementPos(lis[i]);
 71 lis[i][‘size‘] = getElementSize(lis[i]);
 72 }
 73 event = event || window.event;
 74 var t = event.target || event.srcElement;
 75 if(t.tagName.toLowerCase() == ‘li‘){
 76 var p = getMousePos(event);
 77 var el = t.cloneNode(true);
 78 el.style.position = ‘absolute‘;
 79 el.style.left = t.pos.x + ‘px‘;
 80 el.style.top = t.pos.y + ‘px‘;
 81 el.style.width = t.size.width + ‘px‘;
 82 el.style.height = t.size.height + ‘px‘;
 83 el.style.border = ‘1px solid #d4d4d4‘;
 84 el.style.background = ‘#d4d4d4‘;
 85 el.style.opacity = ‘0.7‘;
 86 document.body.appendChild(el);
 87
 88 document.onmousemove = function(event){
 89 event = event || window.event;
 90 var current = getMousePos(event);
 91 el.style.left =t.pos.x + current.x - p.x + ‘px‘;
 92 el.style.top =t.pos.y + current.y - p.y+ ‘px‘;
 93 document.body.style.cursor = ‘move‘;
 94
 95 //判断插入点
 96 for(var i = 0; i < lis.length; i++){
 97 if(current.x > lis[i][‘pos‘][‘x‘] && current.x < lis[i][‘pos‘][‘x‘] + lis[i][‘size‘][‘width‘] && current.y > lis[i][‘pos‘][‘y‘] && current.y < lis[i][‘pos‘][‘y‘] + lis[i][‘size‘][‘height‘]/2){
 98 if(t != lis[i]){
 99 MOVE.isMove = true;
100 outer_wrap.insertBefore(div,lis[i]);
101 }
102
103 }else if(current.x > lis[i][‘pos‘][‘x‘] && current.x < lis[i][‘pos‘][‘x‘] + lis[i][‘size‘][‘width‘] && current.y > lis[i][‘pos‘][‘y‘] + lis[i][‘size‘][‘height‘]/2 && current.y < lis[i][‘pos‘][‘y‘] + lis[i][‘size‘][‘height‘]){
104 if(t != lis[i]){
105 MOVE.isMove = true;
106 outer_wrap.insertBefore(div,lis[i].nextSibling);
107 }
108 }
109 }
110 }
111 //移除事件
112 document.onmouseup = function(event){
113 event = event || window.event;
114 document.onmousemove = null;
115 if(MOVE.isMove){
116 outer_wrap.replaceChild(t,div);
117 MOVE.isMove = false;
118 }
119 document.body.removeChild(el);
120 el = null;
121 document.body.style.cursor = ‘normal‘;
122 document.onmouseup = null;
123 }
124 }
125 }
126 </script>
127 </body>
128 </html>
时间: 2024-10-03 06:00:03

原生JS 实现元素排序的相关文章

原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName

今天在工作中,用到了设置className,因此查阅了一下资料,总结一下. 一.如何用原生js获取class属性 1 <div class = "dom'> 2 </div> 元素JS实现方法: 1 function $class(domclass) 2 { 3 var odiv = document.getElementsByTagName("*"); 4 var aResult = []; //定义一个空数组,用来存放与目标className相同的

原生js获取元素样式

摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

用原生js对表格排序

阿里的模拟笔试题,当时时间有限没写出来,其实是因为自己对原生dom操作不熟悉,这里补一下. 题目的大意是有一个表格,如代码所示 <table> <tr> <th>Name</th> <th>Index</th> </tr> <tr> <td>Jan</td> <td>1</td> </tr> <tr> <td>Saj</t

原生js获取元素样式值

在学习js初期,就一直有一个疑问,获取元素样式的值,不是直接使用obj.style.left之类的就可以得到了吗?可是使用这样的方式,有的时候能够获取得到,有的时候又不能获取,一直疑惑不已,但是由于以前学习态度的问题,也没有深究,今天专门花了点时间整理了一下这方面的知识. 样式 首先,我们要明确样式的种类有以下三种 内联样式: 也就是行内样式,直接写在DOM元素的style属性中 嵌入样式: 写在html页面中的<style></style>中的样式 外部样式: 由link标签引入

原生js删除元素

//删除id var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode.removeChild(idObject); //通过class获取元素 paras = document.getElementsByClassName('paginator'); for(i=0;i<paras.length;i++){ //删除元素 元素.parentNode.removeChi

原生js为元素添加事件

1.行间事件 onclick="函数名()"; <div id="div1" onmouseover="over('400px','400px','green')" onmouseout="over('200px','200px','red')" onclick="show()"></div> 2.js中加事件  设置函数,发生事件时才触发 匿名函数 obj.onmouseout=f

js 数组元素排序

字母排序 <html> <body> <script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Ma

js对象元素排序

{a:4,b:2,c:6}.sort(function(a,b){ return a > b; });