jquery拖拽自动排序插件使用方法详解


Posted in jQuery onJuly 20, 2020

本文为大家分享了jquery拖拽自动排序插件,供大家参考,具体内容如下

该插件并不是原生js写的,是基于jquery的,想看原生的话,请绕道而行。

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="drag.js"></script>
 <style type="text/css">
 div{
  height: 200px;
  overflow-y: auto;
 }
 ul{
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
  display: inline-block;
 }
 .drag-item{
  width: 100px;
  padding: 0 10px;
  line-height: 38px;
  cursor: move;
 }
 .draging{
  background-color: #ccc !important;
 }
 .no-draging{
  background-color: #fff !important;
 }
 </style>
</head>
<body>
 <ul class="drag-box">

 </ul>
</body>
<script type="text/javascript">
 new Drag({
 container: '.drag-box',
 data: ['应用1','应用2','应用3','应用4','应用5','应用6','应用7','应用8','应用9']
 });
</script>
</html>

js:

(function(win){

 function Drag(opts){
 this.init(opts);
 };

 Drag.prototype = {
 constructor: Drag,

 options: {
  container: '',
  data: [], //可以是数据,也可以是html标签
  className: 'item'
 },

 //初始化 
 init: function(opts){
  $.extend(this.options, opts);
  this.$el = $(this.get('container'));
  this._render();
  this._bindEvent();
 },

 get: function(key){
  return this.options[key];
 },

 set: function(key, value){
  this.options[key]=value;
 },

 //渲染列表
 _render: function(){
  var me = this, lis = '',
  data = me.get('data') || [];
  for(var i=0,len=data.length;i<len;i++) lis+='<li class="drag-item" id="drag-item-'+i+'">'+ data[i]+'</li>';
  me.$el.append(lis)
   .find('li').attr('draggable',true)
    .addClass(this.get('className'));
 },

 //绑定事件
 _bindEvent: function(){
  var me = this,
  $lis = $('li', me.$el),
  events = ['dragstart', 'dragenter', 'dragover', 'drop', 'dragend'];
  $.each(events, function(index, item){
  $lis.on(item, function(e){
   me['_'+item+'Handle'] && me['_'+item+'Handle'](e, me);
  });
  })
  $lis.hover(function(){
  $(this).css('background-color','#eee');
  },function(){
  $(this).css('background-color','#fff');
  });
 },

 //开始拖动
 _dragstartHandle: function(e){
  var me = this,oe = e.originalEvent;
  if(oe.dataTransfer){
  oe.dataTransfer.setData('text', '');
  }
  me.$drag = $(e.currentTarget);
  $('li',me.$el).removeClass('item-hover');
  me.$drag.addClass('draging').siblings().addClass('no-draging');
 },

 _dragenterHandle: function(e){
  var me = this;
  me.$drop = $(e.currentTarget);
  if(me.timer){clearTimeout(me.timer)} //事件控制
  me.timer = setTimeout(function(){
  if(me.$drag.attr('id') !== me.$drop.attr('id')){
   me._createMask();
   if(me.$drag.index()<me.$drop.index()) me.$drag.insertAfter(me.$drop);
   else me.$drag.insertBefore(me.$drop);
  }
  }, 30);

 },

 _dragoverHandle: function(e){
  var oe = e.originalEvent;
  e.preventDefault();
  return false;
 },

 _dropHandle: function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
 },

 //拖动结束
 _dragendHandle: function(e){
  var me = this;
  me.$mask && me.$mask.remove();
  setTimeout(function(){
  $('li', me.$el).removeClass('draging no-draging');
  },30);
 },

 //创建遮罩
 _createMask: function(){
  var me = this,$mask = me.$mask = $('<div class="drag-mask"></div>');
  $mask.css({
  position: 'absolute',
  width: me.$drop.outerWidth(),//new
  height: me.$drop.outerHeight(),//new
  left: me.$drop.position().left,
  top: me.$drop.position().top+me.$el.scrollTop(),//new
  backgroundColor: '#fff'
  });
  $mask.on({
  'drop': me._dropHandle,
  'dragover': me._dragoverHandle
  });
  this.$el.find('.drag-mask').remove();
  this.$el.append($mask);
 }

 };

 win.Drag = Drag;
})(window);

踩得坑:

1、关于dataTransfer, 事件对象e中是没有该属性的,要找该属性应该通过e.originalEvent.dataTransfer中去找。

2、兼容火狐浏览器。如果不这样操作,火狐下是无法运行的:

if(oe.dataTransfer){
 oe.dataTransfer.setData('text', '');
}

3、dragover事件每隔 350 毫秒会被触发一次。

4、dragstart、dragenter、dragend事件通过jquery绑定,事件处理函数中的this指向最外层对象,例如上面的new Drag();dragover、drop事件通过jquery绑定,事件处理函数中的this指向被绑定的html标签。

5、jquery获取包括padding的宽度调用:$el.outerWidth()$el.outerHeight()

6、只有属性draggable="true"的元素才可以被拖动。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
You might like
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
用Node提供静态文件服务的方法
2018/07/06 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
使用python实现生成用户信息
2017/03/20 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
物流仓管员岗位职责
2013/12/04 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
年终工作总结范文
2019/06/20 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
Pandas数据类型之category的用法
2021/06/28 Python
图文详解matlab原始处理图像几何变换
2021/07/09 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android