jquery-ui sortable 使用实例
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 使用实例的更多相关文章
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- 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) ...
- Jquery UI sortable
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.p ...
- jquery ui 插件------------------------->sortable
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面
如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- jQuery UI 实例 – 切换(Toggle)
toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...
随机推荐
- 【t059】序列
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 生活中,大多数事物都是有序的,因为顺序的美是最令人陶醉的.所以现在RCDH看了不顺的东西就头痛.所以他 ...
- CentOS7 下的mysql安装与配置
之前虽然也安装过多次mysql,但每次都会遇到各种小问题,这次记录下来,以备后查. 首先是下载与安装 # wget http://dev.mysql.com/get/mysql-community-r ...
- FPGA综合优化
1 速度和面积 在全面优化水平将达到速度和面积RTL要利用逻辑拓扑的优势. 供FPGA由于在后端而言缺乏知识,门级优化.普通情况下更高的速度要求更高的并行性以及更大的面积,可是在某些特殊情况下并非这样 ...
- C#实现拼图游戏
C#实现<拼图游戏> (下) 原理篇 前言:在 http://www.cnblogs.com/labixiaohei/p/6698887.html 程序设计 之 C#实现<拼图游 ...
- effective c++ 条款7
1.随着多态基类应该声明一个质virtual析构函数. 假定class由于不管是什么virtual析构函数, 它应该有一个virtual析构函数. 2.classed的设计目的假设不是作为base c ...
- 使用Ocelot做网关
1首先创建一个json的配置文件,文件名随便取,我取Ocelot.json 这个配置文件有两种配置方式,第一种,手动填写 服务所在的ip和端口:第二种,用Consul进行服务发现 第一种如下: { & ...
- HDU 1598 find the most comfortable road (罗列+Kruskal) 并检查集合
Problem Description XX星有很多城市,城市之间通过一种奇怪的快速公路SARS(Super Air Roam Structure---超级空中漫游结构)进行交流.每条SARS都对行驶 ...
- WPF内实现与串口发送数据和接收数据
原文:WPF内实现与串口发送数据和接收数据 与串口发送数据和接收数据,在此作一个简单的Demo.此Demo可以实现按下硬件按钮,灯亮,发送灯状态数据过来.并且可以实现几个灯同时亮,发送灯的状态数据过来 ...
- 此C语言功能---A
功能名称: abort 动力 能够: 异常终止的过程的 使用 法国: void abort(void); 程序示例: #include <stdio.h> #include <std ...
- Apache 配置 HTTPS访问
将需要配置的项目移动到另一根目录下,作为https访问位置. 修改bitnami配置文件..\Bitnami\wampstack-5.6.19-0\apache2\conf\bitnami\bitna ...