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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP7 新增常量
2021/03/09 PHP
css图片自适应大小
2007/11/28 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
TypeScript中的方法重载详解
2019/04/12 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python3中rank函数的用法
2019/11/27 Python
Python Json数据文件操作原理解析
2020/05/09 Python
python定义类的简单用法
2020/07/24 Python
python实现计算图形面积
2021/02/22 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
自我鉴定书
2014/03/24 职场文书
书香家庭事迹材料
2014/05/09 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
python实现简易名片管理系统
2021/04/11 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL