<!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. TZOJ 5279 马拉松比赛(广搜)

    描述 有一块矩形的海域,其中有陆地也有海洋,这块海域是CSUFT_ACM集训队的训练基地,这一天,昌神说要集训队的队员不能总是训练,于是昌神提出了中南林ACM集训队第一场环陆马拉松比赛,顾名思义就是围 ...

  2. python之函数（function）

    #今天来学习一下函数,function# 定义一个函数的时候,函数不会被执行,只有调用函数,函数才会执行## 定义函数# # 1.def是创建函数的关键字,创建函数# # 2.函数名# # 3.()# ...

  3. 查看CPU序列号以及系统信息

    CPU序列号  wmic cpu get processorid  现在也不唯一,比如联想同款机器,因为CPU批量生产,id也是一样 操作系统信息   systeminfo 查看硬件信息   dxdi ...

  4. VS 窗体大小

    锁定窗体大小,就是鼠标停在窗口边框的时候,不能拖动来改变它的大小…… 有两种方法: 1.可以把Form的属性 FormborderStyle 后面选择 FixedDialog 2.或者把Form窗体的 ...

  5. CentOS 7安装zabbix步骤

    Zabbix配置安装 1.前期准备: 我自己的基础环境:CentOS 7 + Mysql 5.6 可以根据官网介绍一步一步安装,官网地址:https://www.zabbix.com/ 图1: 然后点 ...

  6. adf 笔记

    1>jsf在bean中如何获取url参数,注意bean的范围,如果存在分页,范围不能设置为request,否则第二次加载的时候参数会为空. 最小设置为view,在当前页面中一直有效. 方法一:F ...

  7. 我所理解的 Laravel 请求 生命周期

    转载自:https://laravel-china.org/topics/3343/my-understanding-of-the-laravel-request-life-cycle 当你使用一个工 ...

  8. 1. Install Git and GitExtension

    Install Git Step 1:   Run

  9. wcf服务契约的重载

    a. 服务端 .服务端 契约用OperationContract的Name实现重载 using System; using System.Collections.Generic; using Syst ...

  10. spring mvc , spring data jpa 知识点

    <mvc:view-controller path="/login" view-name="login.jsp"/> <!-- 会直接跳到/W ...