<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<title>div横向拖拽排序</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
body, div {
padding: 0px;
margin: 0px;
}

.box {
position: relative;
margin-left: 15px;
padding: 10px;
padding-right: 0px;
width: 810px;
border: blue solid 1px;
}
.box ul{
list-style: none;
overflow: hidden;
padding: 0;
margin:0;
}
.drag {
float: left;
border: #000 solid 1px;
text-align: center;
}
.box ul li a{
display: block;
padding: 10px 25px;
}
.drag-dash {
position: absolute;
border: #000 solid 1px;
background: #ececec;
}

.dash {
float: left;
border: 1px solid transparent;
}
</style>
</head>
<body>
<h1>div横向拖拽排序</h1>
<div class="box">
<ul>
<li class="drag"><a href="#">导航一</a></li>
<li class="drag"><a href="#">导航二导航</a></li>
<li class="drag"><a href="#">导航导航导航三</a></li>
<li class="drag"><a href="#">导航导航四</a></li>
<li class="drag"><a href="#">导五</a></li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function () {
var range = {x: 0, y: 0};//鼠标元素偏移量
var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //拖拽对象的四个坐标
var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //目标元素对象的坐标初始化
var theDiv = null, move = false;
var choose = false; //拖拽对象 拖拽状态 选中状态
var theDivId = 0, theDivHeight = 0, theDivHalf = 0;
var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
var initPos = {x: 0, y: 0};
var theDivWidth;//拖拽对象的宽度
$(".drag").each(function () {
$(this).mousedown(function (event) {
choose = true;
//拖拽对象
theDiv = $(this);
//记录拖拽元素初始位置
initPos.x = theDiv.position().left;
initPos.y = theDiv.position().top;
//鼠标元素相对偏移量
range.x = event.pageX - theDiv.position().left;
range.y = event.pageY - theDiv.position().top;
theDivId = theDiv.index();
theDivWidth = theDiv.width();
theDivHalf = theDivWidth / 2;
theDiv.removeClass("drag");
theDiv.addClass("drag-dash");
theDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});
// 创建新元素 插入拖拽元素之前的位置(虚线框)
$("<div class='dash'></div>").insertBefore(theDiv);
tempDiv = $(".dash");
$(".dash").css("width" , theDivWidth);
return false
});
});

$(document).mouseup(function (event) {
if (!choose) {
return false;
}
if (!move) {
//恢复对象的初始样式
theDiv.removeClass("drag-dash");
theDiv.addClass("drag");

tempDiv.remove(); // 删除新建的虚线div
choose = false;
return false;
}
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
//恢复对象的初始样式
theDiv.removeClass("drag-dash");
theDiv.addClass("drag");
tempDiv.remove(); // 删除新建的虚线div
move = false;
choose = false;
return false
}).mousemove(function (event) {
if (!choose) {return false}
move = true;
lastPos.x = event.pageX - range.x;
lastPos.y = event.pageY - range.y;
lastPos.x1 = lastPos.x + theDivWidth;
// 拖拽元素随鼠标移动
theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.drag'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
$main.each(function () {
tarDiv = $(this);
tarPos.x = tarDiv.position().left;
tarPos.y = tarDiv.position().top;
tarPos.x1 = tarPos.x + tarDiv.width() / 2;
tarFirst = $main.eq(0); // 获得第一个元素\
tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (lastPos.x <= tarFirstX) {
tempDiv.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
tempDiv.insertAfter(tarDiv);
}
});
return false
});
});
</script>
</body>
</html>

css 可拖拽列表的更多相关文章

  1. CSS之拖拽1

    PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动 到的 ...

  2. Android高级控件（六）——自定义ListView高仿一个QQ可拖拽列表的实现

    Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...

  3. 实现拖拽列表-微信小程序

    之前在网上搜索拖拽列表的实现时,发现了有好多的方法都是基于像素位置的计算实现的,这种方法要求列表元素的大小以及列表的位置有着非常严格的要求,修改和拓展起来非常的麻烦.于是我自己动手实现了一个基于页面元 ...

  4. CSS之拖拽库2

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  5. 【UWP】拖拽列表项的排序功能实现

    在一些允许用户自定义栏目顺序的app(如:凤凰新闻.网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排.这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台 ...

  6. Android学习系列(11)--App列表之拖拽ListView(下)

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.     在这个方法中我们主要是处理 ...

  7. Android学习系列--App列表之拖拽ListView(下)

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.     在这个方法中我们主要是处理 ...

  8. 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  9. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

随机推荐

  1. python的协程和异步io【select|poll|epoll】

    协程又叫做微线程,协程是一种用户态的轻量级的线程,操作系统根本就不知道协程的存在,完全由用户来控制,协程拥有自己的的寄存器的上下文和栈,协程调度切换时,将寄存器上下文和栈保存到其他地方,在切换回来后, ...

  2. js记录

    --获取后缀名,结果 .jpg var extName = "/upload/head_img/20150902102539.jpg";var ta = extName.subst ...

  3. go实现的简易ＴＣＰ的客户端和服务器

    今天介绍golang版本的通信基础:基于TCP的客户端和服务器实现,参考书籍:The Way To Go 那时学习java的时候也是做过通信的,当时是socket编程,服务器监听某一个端口,然后客户机 ...

  4. [Jmeter]通过批处理调用java,java从CSV动态读取登录的用户名和密码，并将其作为参数组合成字符串，写入外部.bat文件，然后通过Java执行这个外部批处理文件

    问题1:怎样通过批处理调用java代码? 问题2:怎样通过java从CSV文件获取到用户名和密码存入变量? 问题3:怎样将获取到的用户名和密码组合成字符串,写入外部批处理文件? 问题4:怎样在批处理文 ...

  5. Executor（一）ExecutorService 线程池

    Executor(一)ExecutorService 线程池 本篇主要涉及到的是 java.util.concurrent 包中的 ExecutorService.ExecutorService 就是 ...

  6. mysql添加注释

    -- 查看字段类型-- show columns from campaign_distribute --给表添加注释 -- alter table campaign_distribute commen ...

  7. webapp的优化总结

    1. 最先加载本地数据,下拉刷新再取最新数据. 2. 图片延后加载.一种方法先<div data-url="xx.png"></div>,先加载一个div, ...

  8. shift + 空格 快捷键 使输入法 在全角和半角直接切换。。 但是全角输入一个 空格 ，会造成jsp页面 无法正常解析。。比如 无法获得参数。。

    shift + 空格 快捷键 使输入法 在全角和半角直接切换.. 但是全角输入一个 空格 ,会造成jsp页面 无法正常解析....比如 无法获得参数.. 如 <form action=" ...

  9. predict_proba 的使用

  10. Tomcat连接池配置

    今日做了个小网站,数据量不大,但当发布到虚拟主机上之后,接连不断的遇到各种问题. 被折磨了数日后,在网上查了大量的相关资料,现总结如下. 一.项目在上传到远程服务器的过程中,有可能丢失文件,或文件内容 ...