jquery-ui提供的拖拽方法
项目当中遇到了任意拖动div标签的功能,找到了jqueryui提供的draggable的插件,这个插件可以实现任意的div的移动,也可以移动到整个屏幕或者在父元素的范围内进行移动。
插件的api http://jqueryui.com//#events
//任意拖动
$(".edrag").draggable({
containment: "#canvas",
scroll: false,
start: function() {
$(this).css("margin-left", "0px"); //开始拖动
},
stop: function(event, ui) {
//拖动完成之后
let index = $(this).parents('.cabox').index();
faceArr[index].rect.x = ui.position.left / fawradio / fahradio;
faceArr[index].rect.y = ui.position.top / fawradio / fahradio;
//console.log(faceArr);
}
});
完整的代码放在zip当中
jquery-ui提供的拖拽方法的更多相关文章
- jQuery UI API - 可拖拽小部件(Draggable Widget)(转)
所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.dragsort.js 实现拖拽过程遇到的问题
.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...
- JQuery UI Datepicker中文显示的方法
出自:http://www.aimks.com/method-to-display-the-jquery-ui-datepicker-chinese.html Query UI Datepicker这 ...
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
- PyQt5控件支持拖拽方法
让控件支持拖拽动作A.setDragEnable(True) 设置A可以拖动B.setAcceptDrops(True) 设置B可以接受拖动B需要满足两个事件1.dragEnterEvent 将A拖到 ...
- jquery dragsort table实现拖拽排序
转自:http://haoningabc.iteye.com/blog/1593640 dragsort官网地址:http://dragsort.codeplex.com/ html代码如下(需引入j ...
随机推荐
- xBIM之二:构建墙和门窗
研究了两天,终于实现了利用xBIM自动输出墙和门窗 比较粗糙的源码如下: private void Form1_Load(object sender, EventArgs e) { //first c ...
- Spring IOC小记
1. What IOC (Inversion Of Control,控制反转)与DI(Dependency Injecion,依赖注入) 用于对象间解耦,如在以前若对象A依赖B则需要在A中负责B的创建 ...
- sonatype nexus安装教程
1. 安装nexus前需要先安装maven.(详见jdk安装教程)2. 将nexus-2.0.2.rar放到d:\teamwork中,点击右键,解压到当前文件夹中.其中包含两个文件夹:nexus,so ...
- 表单只有一项 input 时按回车键会提交表单
在 Vue 中 使用 Element UI,使用表单 el-form 只有一个 el-input 项,使用 @keyup.enter.native 来处理回车事件. 结果发现按下回车时页面总会 ...
- 从头学一次J2EE笔记
1.在Servlet3.5规范之前,Java Web 应用的绝大部分组件都通过web.xml 文件来配置管理, Servlet3.0 规范可通过Annotation来配置管理Web组件,因此web.x ...
- 2019 年 Java 最新面试指南共 80 题,赶快收藏起来吧!
2019 年 Java 最新面试指南共 80 题,赶快收藏起来吧! http://blog.zh66.club/index.php/archives/116/
- Redis学习之对象系统源码分析
背景知识: Redis并没有直接使用sds,双端链表,字典,压缩列表,跳表等这些数据结构来直接实现键值对数据库,而是基于这些对象创建了一个对象系统,这个对象系统包含5个对象:字符串对象,列表对象,哈希 ...
- pytest_demo_实战1
1.根目录配置 pytest.ini [pytest] addopts = -p no:warnings 2.更改运行手势,系统配置 file -> setting -> Tools -& ...
- 【CTS2019】随机立方体(容斥)
[CTS2019]随机立方体(容斥) 题面 LOJ 洛谷 题解 做这道题目的时候不难想到容斥的方面. 那么我们考虑怎么计算至少有\(k\)个极大值的方案数. 我们首先可以把\(k\)个极大值的位置给确 ...
- 【02】Python:数据类型和运算符
写在前面的话 任何编程语言一开始都是从概念出发的,但各种编程语言之间的概念可能又会有差异,所以,老生常谈,我们还是需要从新过一遍 Python 的概念,当然,如果你已经是老司机了,完全可以一晃而过,不 ...