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

2024-09-29 02:53:17

本文为大家分享了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-ui中的sortable来实现拖拽排序的简单实例

1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s
简单的jQuery拖拽排序效果的实现(增强动态)

增强动态增加Div效果原来没有新建动作,分析代码后发现很容易增强~~ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css">
jQuery实现div横向拖拽排序的简单实例

实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><
jqueryUI里拖拽排序示例分析

示例参考http://jsfiddle.net/KyleMit/Geupm/2/ (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序这个是html代码复制代码代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog">
jquery拖拽排序简单实现方法(效果增强版)

本文实例讲述了jquery拖拽排序简单实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title
针对后台列表table拖拽比较实用的jquery拖动排序

现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>
简单的jquery拖拽排序效果实现代码

步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标进行计算和判断来确定要插入的目标元素: 4.用insertBefore 方法插入到目标元素的前面具体代码如下: 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&
jquery拖拽自动排序插件使用方法详解

本文为大家分享了jquery拖拽自动排序插件,供大家参考,具体内容如下该插件并不是原生js写的,是基于jquery的,想看原生的话,请绕道而行. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javas
jquery.tableSort.js表格排序插件使用方法详解

本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
可拖拽组件slider.js使用方法详解

基于 mithril.js ,javascript ,scss写一个可拖动的滑块组件,供大家参考,具体内容如下问题描述: 需求需要实现一个可拖动的滑块组件,但是又不能用UI框架,只好自己动手写一个了. 废话不多说,直接上代码. 技术要求: 需要有mithril.js,javascript,scss技术基础. js及页面代码. var m = require("mithril"); require('./slider.scss'); import slider from './slid
TableSort.js表格排序插件使用方法详解

本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TableSort</title> <style type="text/css"> table { bor
jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
为Jquery EasyUI 组件加上清除功能的方法(详解)

1.背景在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义定义JS
IDEA下使用MyBatisCodeHelper插件的方法详解

一:IDEA下使用MyBatisCodeHelper插件.(IDEA的版本 2018 2.5亲测可用) 1.1 IDEA安装MyBatisCodeHelper插件. MyBatisCodeHelper插件现在要付费了,有条件可以买激活码激活的,支持正版,这里演示安装硬盘下载的插件的方式来介绍安装. 下载链接: 链接: https://pan.baidu.com/s/1I-XlrPPVAuzsu9_XY0eEUQ 提取码: bqvn ,内含多个版本的.下载解压查看. Mybatis-Plugin
Flutter自动路由插件auto_route使用详解

目录一.简介二.基本使用 2.1 安装插件 2.2 定义路由表 2.3 生成路由 2.4 路由跳转 2.5 处理返回结果三.路由导航 3.1 嵌套导航 3.2 Tab 导航 3.3 PageView 3.4 声明式导航四.高级用法 4.1 路由控制器 4.2 Paths 4.2.1 Path Parameters 4.2.2 Inherited Path Parameters 4.2.3 Query Parameters 4.2.4 Redirecting Paths 4.3 路由守护
对python实现合并两个排序链表的方法详解

输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 1.迭代方法 def Merge(self, pHead1, pHead2): p1, p2 = pHead1, pHead2 if p1 and p2: if p1.val < p2.val: head = p1 p1 = p1.next else: head = p2 p2 = p2.next cur = head elif p1: return p1 else: return p2 while p
TypeScript合并两个排序链表的方法详解

目录前言思路分析实现代码测试用例示例代码前言给定两个递增排序的链表,如何将这两个链表合并?合并后的链表依然按照递增排序.本文就跟大家分享一种解决方案,欢迎各位感兴趣的开发者阅读本文. 思路分析经过前面的学习,我们知道了有关链表的操作可以用指针来完成.同样的,这个问题也可以用双指针的思路来实现: p1指针指向链表1的头节点 p2指针指向链表2的头节点声明一个变量存储合并后的链表,比对两个指针指向的节点值大小: 如果p1指针指向的节点值比p2指向的值小,合并后的链表节点就取p1节点

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

相关推荐

随机推荐