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 ...
随机推荐
- Linux性能优化实战学习笔记:第三十七讲
一.上节回顾 上一节,我带你一起学习了网络性能的评估方法.简单回顾一下,Linux 网络基于 TCP/IP协议栈构建,而在协议栈的不同层,我们所关注的网络性能也不尽相同. 在应用层,我们关注的是应用程 ...
- [LeetCode] 527. Word Abbreviation 单词缩写
Given an array of n distinct non-empty strings, you need to generate minimal possible abbreviations ...
- 基于Tendermint的区块链漂流瓶简单实现
本文主要借demo介绍基于Tendermint的区块链应用开发,这个demo很简单,主要包含以下功能: 扔漂流瓶 捞漂流瓶 之后投放者和打捞者可以相互传递[加密]信息 代码已上传至github. Te ...
- BCompare注册文件+密钥被撤销解决方案
注册码: rssAPVg2OpBjDVo3E0DhGWrjPIq0hsTSuNz13wTuzVHfb2mRgO9bZKn9Bl42D5YEyMSYPXsxzcb08dqbRlbzWNJzJXE6YVa ...
- 标签一致项(LC-KSVD)-全文解读
Learning A Discriminative Dictionary for Sparse Coding via Label Consistent K-SVD 1,同步学习判决字典和线性分类器 2 ...
- RabbitMQ的构架
初识rabbitMQ RabbitMQ 是一个由 Erlang 语言开发的 AMQP 的开源实现. AMQP :Advanced Message Queue,高级消息队列协议.它是应用层协议的一个开放 ...
- arcgis js api 4.X 自定义工具按钮
// All material copyright ESRI, All Rights Reserved, unless otherwise specified. // See https://js.a ...
- Teradata 数据库介绍
Teradata在整体上是按Shared Nothing 架构体系进行组织的,他的定位就是大型数据仓库系统,定位比较高,他的软硬件都是NCR自己的,其他的都不识别:所以一般的企业用不起,价格很贵.由于 ...
- CF1200D 【White Lines】
退役快一年了之后又打了场紧张刺激的$CF$(斜眼笑) 然后发现$D$题和题解里的大众做法不太一样 (思路清奇) 题意不再赘述,我们可以看到这个题~~好做~~在只有一次擦除机会,尝试以此为突破口解决问题 ...
- spring的15个经典面试题
总结Spring框架的15个经典面试题. 什么是Spring框架? Spring是一种轻量级框架,旨在提高开发人员的开发效率以及系统的可维护性. 我们一般说的Spring框架就是Spring Fram ...