jquery-ui sortable 使用实例

最近公司需要做任务看板,需要拖拽效果。点击查看效果。由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable,该组件是基于sortable封装的。但是由于使用的原生html5的拖拽属性,导致拖拽过程有透明度,而且不能修改透明度和倾斜度,达不到产品的要求(产品要求模仿worktile的使用体验)。同时我也看了同行很多类似的看板效果,都有倾斜度和非透明,经研究,采用的jquery-ui的sortable。所以,死皮赖脸的选择jquery-ui的sortable来操作,其实是极不情愿的使用:因为基于jQuery的,jQuery占空间太大。但由于是pc端,也还可以接受。

在开发之前,可以先看jquery-ui的sortable的官方文档国人整理的文档的一些实例

  • 引入jquery库和jquery-ui库
// 引入样式文件
<link rel="stylesheet" href="https://static.clouderwork.com/task/static/js/jquery-ui.min.css">
// 引入jquery 库
<script src="https://static.clouderwork.com/task/static/js/jquery.min.js"></script>
// 引入jquery-ui库
<script src="https://static.clouderwork.com/task/static/js/jquery-ui.min.js"></script>
  • 使用实例代码
// 初始化拖拽
initSort () {
// 拖拽时开始滚动的间距
var scrollingSensitivity = 20
// 拖拽时滚动速度
let scrollingSpeed = 20
// 拖拽前的父级节点
let dragBeforeParentNode = null
// 初始化拖拽函数
$('.task-lists').sortable({
// 自适应placeholder的大小
forceHelperSize: true,
// 拖拽时的鼠标形状
cursor : '-webkit-grabbing',
// 拖拽的父级节点(该节点一定要注意,配置错误会导致当前屏幕外的元素没法自动滚动拖拽,两列之间拖拽的滚动也会出问题)
appendTo: '.drag-task',
// 拖拽时的倾斜度
rotate: '5deg',
// 延迟时间(毫秒),避免和click同时操作时出现的冲突
delay: 150,
// 以clone方式拖拽
helper: 'clone',
// 拖拽到边框出现滚动的间距,
scrollSensitivity:scrollingSensitivity,
// 应用于拖拽空白区域的样式
placeholder: 'portlet-placeholder ui-state-highlight',
// 允许拖拽预留空白区域
forcePlaceholderSize: true,
// 多个列表之间的拖拽的dom元素
connectWith: '.task-lists',
// 拖拽结束函数
stop: (e, ui) => {
// 当前拽入的元素
let item = $(ui.item)
// 当前拽入元素的下标
let index = item.index()
let kid = ''
// xxxx 这里面可以操作数据更新
},
// 开始拖拽时的函数
start: (e, ui) => {
// 拖拽前的父级节点
dragBeforeParentNode = ui.item[0].parentNode
// 让placeholder和源高度一致
ui.placeholder.height(ui.helper[0].scrollHeight).width(258)
// xxxx 这里可以记录一些拖拽前的元素属性
},
// 处理两列滚动条问题
sort:function(event, ui){
var scrollContainer = ui.placeholder[0].parentNode
// 跨列拖拽的情况
if (dragBeforeParentNode && dragBeforeParentNode.id !== scrollContainer.id) {
// 设置拽入的列表的滚动位置
var overflowOffset = $(scrollContainer).offset()
if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed
} else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed
}
}
}
}).disableSelection()

在开发的时候一定要多看文档,了解其属性的含义会事半功倍,顺延解决问题。

下面给一个实例供参考:jquery-ui-sortable 实例, 源代码在github上面,地址

jquery-ui sortable 使用实例的更多相关文章

  1. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  2. jquery ui sortable 实现table,row的拖动。(Make Table Rows Sortable Using jQuery UI Sortable)

    // Return a helper with preserved width of cells var fixHelper = function(e, ui) { //console.log(ui) ...

  3. Jquery UI sortable

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.p ...

  4. jquery ui 插件------------------------->sortable

    <!doctype html><html lang="en"><head>  <meta charset="utf-8" ...

  5. 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...

  6. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  7. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  8. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  9. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  10. jQuery UI 实例 – 切换(Toggle)

    toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...

随机推荐

  1. 【t059】序列

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 生活中,大多数事物都是有序的,因为顺序的美是最令人陶醉的.所以现在RCDH看了不顺的东西就头痛.所以他 ...

  2. CentOS7 下的mysql安装与配置

    之前虽然也安装过多次mysql,但每次都会遇到各种小问题,这次记录下来,以备后查. 首先是下载与安装 # wget http://dev.mysql.com/get/mysql-community-r ...

  3. FPGA综合优化

    1 速度和面积 在全面优化水平将达到速度和面积RTL要利用逻辑拓扑的优势. 供FPGA由于在后端而言缺乏知识,门级优化.普通情况下更高的速度要求更高的并行性以及更大的面积,可是在某些特殊情况下并非这样 ...

  4. C#实现拼图游戏

    C#实现<拼图游戏> (下) 原理篇   前言:在 http://www.cnblogs.com/labixiaohei/p/6698887.html 程序设计 之 C#实现<拼图游 ...

  5. effective c++ 条款7

    1.随着多态基类应该声明一个质virtual析构函数. 假定class由于不管是什么virtual析构函数, 它应该有一个virtual析构函数. 2.classed的设计目的假设不是作为base c ...

  6. 使用Ocelot做网关

    1首先创建一个json的配置文件,文件名随便取,我取Ocelot.json 这个配置文件有两种配置方式,第一种,手动填写 服务所在的ip和端口:第二种,用Consul进行服务发现 第一种如下: { & ...

  7. HDU 1598 find the most comfortable road (罗列+Kruskal) 并检查集合

    Problem Description XX星有很多城市,城市之间通过一种奇怪的快速公路SARS(Super Air Roam Structure---超级空中漫游结构)进行交流.每条SARS都对行驶 ...

  8. WPF内实现与串口发送数据和接收数据

    原文:WPF内实现与串口发送数据和接收数据 与串口发送数据和接收数据,在此作一个简单的Demo.此Demo可以实现按下硬件按钮,灯亮,发送灯状态数据过来.并且可以实现几个灯同时亮,发送灯的状态数据过来 ...

  9. 此C语言功能---A

    功能名称: abort 动力 能够: 异常终止的过程的 使用 法国: void abort(void); 程序示例: #include <stdio.h> #include <std ...

  10. Apache 配置 HTTPS访问

    将需要配置的项目移动到另一根目录下,作为https访问位置. 修改bitnami配置文件..\Bitnami\wampstack-5.6.19-0\apache2\conf\bitnami\bitna ...