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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 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通用分页类page.php[仿google分页]
2008/08/31 PHP
php树型类实例
2014/12/05 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Python学习之time模块的基本使用
2021/01/17 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
中间件分为哪几类
2012/03/14 面试题
后勤岗位职责
2013/11/26 职场文书
平面设计师工作职责范文
2013/12/03 职场文书
自荐书4要点
2014/01/25 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
公司领导班子对照材料
2014/08/18 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
企业公益活动策划方案
2014/08/24 职场文书
公司酒会主持词
2015/07/02 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers