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 ...
随机推荐
- appium--连续滑动
TouchAction 在之前说过了滑动swip,那种是两点之间的滑动,比如上滑,左滑等.但实际工作中会遇到一些复杂的场景,如九宫格的滑动等待,这时候就要使用TouchAction,TouchActi ...
- CSP-S考前救急(考试前还是别复习了,事实证明复习了也没考到...
“不要为明天而忧虑,因为明天自有明天的忧虑:一天的难处一天当就够了.” 念念不忘,必有回响. 考试结束前15分钟停止写代码.然后按照以下顺序进行检查: -检查文件名是否写错-检查是否打开文件输入输出 ...
- 妖娆的HTML
初涉前端之HTML 1.首先是Web服务的本质,是怎么工作的?(基于python的网络实现) import socket server = socket.socket() server.bind((' ...
- navicat 11.2.7破解
1,软件安装包目录 2,根据电脑系统安装x64或者x86,安装完成之后将PatchNavicat.exe放到navicat的安装目录下 3,右键以管理员身份运行PatchNavicat.exe,或者双 ...
- mac os 使用 from scipy.misc import imread ImportError: cannot import name 'imread'
mac os 使用 from scipy.misc import imread ImportError: cannot import name 'imread' 问题1: 我原先安装了 pillow ...
- redis在项目中的应用
redis在项目中的应用 ps:PHP 会自动 关redis连接 不需要手动关 对于临时的数据 可以不经过数据库直接redis上操作<pre>/*消息队列实例 消息队列详细步骤在http ...
- StuQ技能图谱
- 并行 Webclient(一)
在 Stackoverflow 上看到了一个提问,关于并行的 WebClient,觉得回答者的代码很有参考性,下面记录一下,以便日后用到: 提问者: 我有一个功能基本上分为两个子功能. html=Re ...
- 关于NB-IoT,没有比这篇更通俗易懂的啦!
来源:内容来自「鲜枣课堂」,谢谢. 大家好,我是小枣君. 今天,我是来“吹NB”的.嗯,标题已经剧透了,这个NB,就是NB-IoT. 在过去的一年多,NB-IoT真的可以说是大红大紫.在通信圈里,除了 ...
- 2019-11-29-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序
原文:2019-11-29-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序 title author date CreateTime categories win1 ...