jQuery ui中sortable draggable droppable的使用
时间:2022-07-22
本文章向大家介绍jQuery ui中sortable draggable droppable的使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的时间,搞清楚了大概的参数配置,以及遇到的一些问题,总结如下。
sortable
简单的配置如下:
$('#subs-box').sortable({
axis: 'y',
cursor: 'ns-resize',
placeholder: "ui-state-highlight", // 排序过程中占位符的class样式设置
forcePlaceholderSize: true, // 强迫占位符有一个尺寸大小。
handle:'.sort-at', // 在对象内指定的元素上开始拖动,而不是整个元素都可以拖动
distance: 10,
opacity: 0.8,
containment:'parent', // 元素可以拖动排序的范围
// helper: 'clone', // 是否clone一个元素进行拖动
items: '.subject', // 指定哪些元素可以排序
stop: function (e, ui) {
// 排序后元素的顺序(前提每个元素都需要有id属性)
let newSubArr = $("#subs-box").sortable('toArray');
console.log(newSubArr);
},
}).disableSelection(); // 拖动时禁止选中元素
还有一些排序时候的事件和方法,都在参考链接的文档里面。
draggable
dragInit() {
let me = this;
let selector = '.ptype-'+me.selectedSubType;
// 题目拖动
$('#subs-box .subject').draggable({
// appendTo: ".ptype-item.radio", // 当进行拖动时,拖动组件助手应该被添加到的元素。
// connectToSortable: "#subs-box", // 允许draggable被拖拽到指定的sortables中。
// 拖动时使用的是clone的元素。如果值设置为"clone", 那么该元素将会被复制,并且被复制的元素将被拖动。
// 之所以不使用 helper: 'clone', 是因为clone的元素没有样式,所以我们需要自定义样式,所以使用了自定义函数。
helper: function() {
let helper = $(this).clone();
helper.css({'width': $(this).width(), 'background': '#fff'}); // 设置clone元素的样式
return helper;
},
handle: ".drag-at", // 指定在特定的元素上触发鼠标按下事件时,才可以拖动。
cursor: 'move',
// containment: '.sub-box', // 可以限制draggable只能在指定的元素或区域的边界以内进行拖动。
revert: 'invalid', // 如果设置为true,当拖动停止时,元素位置将被重置。
revertDuration: 200,
distance: 10,
opacity: 0.8,
zIndex: 10000,
refreshPositions: true, // 所有的可拖动位置在每次鼠标移动时都会被计算。(设置该值使得drop的位置更加精确)
start(event, ui) {
$(selector).addClass('allow'); // 元素拖拽的时候,设置可放置元素的样式,示意你可以拖拽到那里去
// 开始拖拽的时候,初始化drop
me.$nextTick(()=>{
me.dropInit();
});
},
stop(event, ui) {
$(selector).removeClass('allow');
// 拖拽停止的时候,销毁drop函数。
me.dropDestory();
}
}).disableSelection();
},
注意事项: 每次dropInit函数初始化后,如果需要再次初始化,需要先销毁之前的放置对象。否则第一次初始化后,比如某个地方A可以放置拖拽的元素,但是第二次初始化后,地方A就不可以放置了。然而实际上,如果你不把第一次初始化的dropInit函数销毁掉,地方A在第二次初始化后还是可以放置的。所以需要在拖拽停止的时候,销毁上一次的dropInit对象。
dropable
dropInit() {
let me = this;
// 题目放置(设置题目根据不同类型可以放置不同的分页)
// selector是可变的,也就是每次可拖拽元素可放置的元素是不同的。所以需要每次拖拽后清除之前dropInit对象。
let selector = '.ptype-'+me.selectedSubType;
$(selector).droppable({
// accept: selector,
// accept: function(d) {
// if($(this).hasClass('ptype'+me.selectedSubType)){
// console.log('d>>>>>>',$(this)[0]);
// return true;
// }
// },
// hoverClass: "drop-hover",
tolerance: 'pointer', // 指定使用那种模式来测试一个拖动(draggable)元素"经过"一个放置(droppable)对象
drop: function( event, ui ) {
// $(this) 填充到的元素
// ui.draggable.context 填充的元素
let dragId = $(ui.draggable.context).attr('id');
let dropId = $(this).attr('id');
// 移动到新的分页
if(dropId === 'newpage') {
me.moveAddPage(dragId);
} else { // 移动题目到另一个分页
if(dropId === me.selectedPage.id) { // 移动到自己的分组,不做处理
} else {
let index = me.selectedPage.subs.indexOf(dragId);
if(index > -1) {
me.selectedPage.subs.splice(index, 1);
me.pages.forEach(page=>{
if(page.id === dropId) {
page.subs.push(dragId);
}
});
me.$openNotice('移动成功');
// 其他操作...
}
}
}
$(this).removeClass('allow-hover');
},
over(event, ui) {
$(this).addClass('allow-hover'); // 当拖拽元素进入可放元素时,可放置元素本身的样式
},
out() {
$(this).removeClass('allow-hover'); // 设置拖拽元素离开可放元素时,清除可放置元素本身的样式
}
});
},
dropDestory() {
let selector = '.ptype-'+me.selectedSubType;
$(selector).droppable("destroy");
},
参考链接
- https://www.html.cn/jquery-ui-api/sortable/
- https://www.html.cn/jquery-ui-api/draggable/
- https://www.html.cn/jquery-ui-api/droppable
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于Apache shiro实现一个账户同一时刻只有一个人登录(shiro 单点登录)
- 视频上云安防视频云服务平台EasyCVR通过海康sdk协议接入多路设备拉流时出现部分设备拉流不稳定是什么原因?
- Centos6.x服务器配置jdk+tomcat+mysql环境(jsp+mysql)
- Linux的压缩和解压缩的方法总结
- RTSP/GB28181/HIKSDK/Ehome协议视频融合平台EasyCVR编译C++报参见“XXX”的声明错误
- 详解 Linux 常用目录的作用
- CentOS6环境下搭建路由器的方法
- centos7下NFS使用与配置的步骤
- 基于DOM4J的XML文件解析类
- Win7安装和配置Apache2.4服务器的详细方法
- shiro会话管理示例代码
- Windows Apache2.4 VC9(ApacheHaus)详细安装配置教程
- 在centos 7中安装配置k8s集群的步骤详解
- Centos7.2 编译安装方式搭建 phpMyAdmin
- CentOS 6.5 web服务器apache的安装与基本设置