html实现拖拽排序,简单的jquery拖拽排序效果实现代码
步骤:
1.实现随鼠标移动的效果;
2.初始化一个元素及其坐标;
3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素;
4.用insertBefore 方法 插入到目标元素的前面
具体代码如下:
测试的拖拽功能
body, div { margin: 0; paading: 0; font-size: 12px; }
body { width: 960px; margin: 0 auto; }
ul, li { margin: 0; padding: 0; list-style: none; }
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
.box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: #ccc; }
.maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; }
.hide { width: 600px; height: 80px; margin-bottom: 5px; }
.dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; };
$(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 theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
$(".main").each(function(){
$(this).mousedown(function (event){
//拖拽对象
theDiv = $(this);
//鼠标元素相对偏移量
range.x = event.pageX - theDiv.offset().left;
range.y = event.pageY - theDiv.offset().top;
theDivId = theDiv.index();
theDivHeight = theDiv.height();
theDivHalf = theDivHeight/2;
move = true;
theDiv.attr("class","maindash");
// 创建新元素 插入拖拽元素之前的位置(虚线框)
$("
});
});
$(document).mousemove(function(event) {
if (!move) return false;
lastPos.x = event.pageX - range.x;
lastPos.y = event.pageY - range.y;
lastPos.y1 = lastPos.y + theDivHeight;
// 拖拽元素随鼠标移动
theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'});
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.main'); // 局部变量:按照重新排列过的顺序 再次获取 各个元素的坐标,
tempDiv = $(".dash"); //获得临时 虚线框的对象
$main.each(function () {
tarDiv = $(this);
tarPos.x = tarDiv.offset().left;
tarPos.y = tarDiv.offset().top;
tarPos.y1 = tarPos.y + tarDiv.height()/2;
tarFirst = $main.eq(0); // 获得第一个元素
tarFirstY = tarFirst.offset().top + theDivHalf ; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (lastPos.y <= tarFirstY) {
tempDiv.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后, 直接插入
if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1 ) {
tempDiv.insertAfter(tarDiv);
}
});
}).mouseup(function(event) {
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
theDiv.attr("class", "main"); //恢复对象的初始样式
tempDiv.remove(); // 删除新建的虚线div
move=false;
});
});
html实现拖拽排序,简单的jquery拖拽排序效果实现代码相关推荐
- 算法研究:插入类排序(简单插入,折半插入,希尔排序)
百度百科:有一个已经有序的数据序列,要求在这个已经排好的数据序列中插入一个数,但要求插入后此数据序列仍然有序,这个时候就要用到一种新的排序方法--插入排序法,插入排序的基本操作就是将一个数据插入到已经 ...
- 简单的jQuery无缝向上滚动效果
简介 这是一个基于 jQuery 的简单的向上滚动效果插件,代码很少,功能也比较单一,可用于文字或图片滚动,鼠标移动到上面会暂停滚动.功能虽然单一,不过一般情况下也够用了,而且还很小巧. 兼容 兼容所 ...
- 简单的Jquery焦点图切换效果
利用Jquery,优雅的实现焦点图切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 最简单最浪漫的七夕表白效果——上代码
前言:你说说这一年都是过情人节了,二月十四情人节.五月二十情人节.五月二十一情人节.还有前些日子的立秋又来秋天的第一杯奶茶,这如今呀又要到了牛郎织女相会的日子--"七夕节",还有双 ...
- 好看的多级菜单html,jQuery实现美观的多级动画效果菜单代码
本文实例讲述了jQuery实现多级动画效果菜单代码.分享给大家供大家参考.具体如下: 这是基于jQuery实现的一款多级动画菜单源代码,动画效果流畅,确实不错的动画菜单,欢迎大家试用.这种菜单 一般应 ...
- html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
- jQuery 拖拽窗体
jQuery 拖拽窗体事件 今天给大家分享一个简单拖拽事件,可以通过拖拽事件实现数据的传递,已达到良好的交互,可以实现更为可观的效果. 具体来说,只有三部基本的操作: 第一:当鼠标按下时触发的事件(o ...
- android gridview拖动排序,Asp.net GridView 拖拽排序 原创(欢迎拍砖,敬请嘴下留情!)...
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...
- 微信小程序 实现最简单的组件拖拽
背景 最近在自主学习微信小程序的开发:对于零基础入门(没有学习过前端)的我,查阅了许多微信小程序拖拽的实现,大部分要么实现起来太复杂了,要么封装组件太复杂了,附带了拖拽之后排序等功能:因此写下这篇个人 ...
最新文章
- 如何用 Windows Live Writer 和 Word 2013 分别发表博客到Cnblog 和CSDN
- 斜率小于0的连线数量 51Nod - 1107 (树状数组+离散化)
- BigMemroy系列文章--11. BigMemory中的SizeOf问题
- 用C语言做的 一个整人的小程序
- jtag引脚定义_硬件学习之通过树莓派操控 jtag
- P4774 [NOI2018]屠龙勇士
- android 图片缓存工具类,Android工具类系列-Glide图片缓存与圆角
- 关于国内厂商的国际版杀毒软件
- mysql 数据库连表查询语句_数据库连表查询sql语句
- mysql 表上线_腾讯云上线数据库 MySQL 8.0 版
- 你不专业并且自以为是,所以被坑
- linux+nginx+tomcat负载均衡,实现session同步
- No package ‘mate-settings-daemon‘ found
- EDK2编译报错,请帮我看看这个是什么错误
- QT使用RabbitMQ
- Kodu吃苹果---Kodu少儿编程第六天
- 最强nba体验服显示服务器正在停机,最强NBA体验服
- 第二章:如何撰写学术论文(文科)
- 风向风速图将Series中的风向风速数据data和xAxis中的时间data一一对应
- 【2022-09-15】蚂蚁金服秋招笔试三道编程题
热门文章
- C++读取文本文件中以TAB作为分隔符,且中间字段有为空的情况的方法?
- android 视图覆盖,如何在Android中添加覆盖视图超过其他视图?
- php做一个计算日期之间天数,PHP计算任意两个日期之间的天数
- mysql基础知识整理_MYSQL基础知识整理
- 人工智能AI实战100讲(四)-基于深度学习的图像增强综述
- java二叉树删除子树_132-BST删除有一颗子树的结点
- 修改telnet提示并非_俊翔:修改ECU数据解除奔驰GL350尿素限制
- docker更换国内镜像源
- 汇智创科机器人_【汇智创科机器人招聘信息】-看准网
- 一篇文章搞定css3 3d效果