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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jquery replace方法去空格
May 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
header跳转和include包含问题详解
2012/09/08 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP反射API示例分享
2016/10/08 PHP
document.compatMode介绍
2009/05/21 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
自定义vue组件发布到npm的方法
2018/05/09 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
python 异或加密字符串的实例
2018/10/14 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
一套VC试题
2015/01/23 面试题
保安员岗位职责
2013/11/17 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
简短大学毕业感言
2014/01/18 职场文书
经销商培训邀请函
2014/01/21 职场文书
实习报告评语
2014/04/26 职场文书
环保专项行动方案
2014/05/12 职场文书
环境日宣传活动总结
2014/07/09 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python