<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title></title>

 <style type="text/css">

 *{ margin: 0; padding: 0; -moz-user-select:none;}

 ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}

 li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}

 li:hover{ background: #bdb76b; cursor: move;}

 </style>

 </head>

 <body>

 <ul id="outer_wrap">

 <li>第一条</li>

 <li>第二条</li>

 <li>第三条</li>

 <li>第四条</li>

 <li>第五条</li>

 <li>第六条</li>

 <li>第七条</li>

 <li>第八条</li>

 </ul>

 <script type="text/javascript">

 function $(id){

 return document.getElementById(id);

 }

 //获取鼠标位置

 function getMousePos(e){

 return {

 x : e.pageX || e.clientX + document.body.scrollLeft,

 y : e.pageY || e.clientY + document.body.scrollTop

 }

 }

 //获取元素位置

 function getElementPos(el){

 return {

 x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,

 y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop

 }

 }

 //获取元素尺寸

 function getElementSize(el){

 return {

 width : el.offsetWidth,

 height : el.offsetHeight

 }

 }

 //禁止选择

 document.onselectstart = function(){

 return false;

 }

 //判断是否有挪动

 var MOVE = {};

 MOVE.isMove = false;

 //就是创建的标杆

 var div = document.createElement('div');

 div.style.width = '400px';

 div.style.height = '1px';

 div.style.fontSize = '0';

 div.style.background = 'red';

 var outer_wrap = $('outer_wrap');

 outer_wrap.onmousedown = function(event){

 //获取列表顺序

 var lis = outer_wrap.getElementsByTagName('li');

 for(var i = 0; i < lis.length; i++){

 lis[i]['pos'] = getElementPos(lis[i]);

 lis[i]['size'] = getElementSize(lis[i]);

 }

 event = event || window.event;

 var t = event.target || event.srcElement;

 if(t.tagName.toLowerCase() == 'li'){

 var p = getMousePos(event);

 var el = t.cloneNode(true);

 el.style.position = 'absolute';

 el.style.left = t.pos.x + 'px';

 el.style.top = t.pos.y + 'px';

 el.style.width = t.size.width + 'px';

 el.style.height = t.size.height + 'px';

 el.style.border = '1px solid #d4d4d4';

 el.style.background = '#d4d4d4';

 el.style.opacity = '0.7';

 document.body.appendChild(el);

 document.onmousemove = function(event){

 event = event || window.event;

 var current = getMousePos(event);

 el.style.left =t.pos.x + current.x - p.x + 'px';

 el.style.top =t.pos.y + current.y - p.y+ 'px';

 document.body.style.cursor = 'move';

 //判断插入点

 for(var i = 0; i < lis.length; i++){

 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){

 if(t != lis[i]){

 MOVE.isMove = true;

 outer_wrap.insertBefore(div,lis[i]);

 }

 }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']){

 if(t != lis[i]){

 MOVE.isMove = true;

 outer_wrap.insertBefore(div,lis[i].nextSibling);

 }

 }

 }

 }

 //移除事件

 document.onmouseup = function(event){

 event = event || window.event;

 document.onmousemove = null;

 if(MOVE.isMove){

 outer_wrap.replaceChild(t,div);

 MOVE.isMove = false;

 }

 document.body.removeChild(el);

 el = null;

 document.body.style.cursor = 'normal';

 document.onmouseup = null;

 }

 }

 }

 </script>

 </body>

 </html>

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

  1. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  2. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  3. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

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

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  5. JavaScript DOM查询，原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  6. 用原生js对表格排序

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

  7. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  8. 原生JS查找元素

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...

  9. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

随机推荐

  1. IntelliJ IDEA创建maven web项目（IDEA新手适用）

      步骤一:首先先创建一个project,在这里就是创建一个maven的工作空间 步骤二:按照下面的步骤操作就可以了,最后next 首先,选择左边的maven 然后在右边Creater from ar ...

  2. pycharm最新版新建工程没导入本地包问题：module 'selenium.webdriver' has no attribute 'Firefox'

    前言 最新版的pycharm做了很大的改变,新建工程的时候,默认不导入本地的安装包,这就导致很多小伙伴踩坑了... 明明已经pip安装过selenium了,但是却报AttributeError:mod ...

  3. 一种思路，隐藏input标签，通过label关联

    <label class="btn btn-default btn-file">上传图片 <input hidden type="file" ...

  4. C编程常错项

    linux系统下C编程一般报错;1,使用sqrt开平方函数未定义,是因为math.h[库,头文件未包含]2,隐式申明与内建函数"XXXX"不兼容;上述问题所在,一般是因为使用exi ...

  5. linux运维工程师工作中的一些常见问题解决方法

    http://blog.sina.com.cn/s/blog_b9fe247a0101anoe.html 1.shell脚本死活不执行 问题:某天研发某同事找我说帮他看看他写的shell脚本,死活不执 ...

  6. JAVA Spring JavaBean 引入 JavaBean ( 外部引用, 内部定义, 级联属性 )

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. 前台框架vue.js中怎样嵌入 Echarts 组件？

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

  8. 19 网络编程--Socket 套接字方法

    1.Socket(也称套接字)介绍 socket这个东东干的事情,就是帮你把tcp/ip协议层的各种数据封装啦.数据发送.接收等通过代码已经给你封装好了 ,你只需要调用几行代码,就可以给别的机器发消息 ...

  9. mongodb基础学习11-复制集和分片结合使用

    实际的使用中复制集和分片是结合使用的,即一个分片由一个复制集构成,多个分片存储数据库的数据 调用脚本启动两个复制集 启动configsvr的节点 启动mongos 增加分片,这次要加上复制集的id,节 ...

  10. map模块使用方法

    map指令使用ngx_http_map_module模块提供的.默认情况下,nginx有加载这个模块,除非人为的 --without-http_map_module.ngx_http_map_modu ...