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 ...
随机推荐
- DVWA XSS (Stored) 通关教程
Stored Cross Site Scripting 存储型XSS,持久化,代码是存储在服务器中的,如在个人信息或发表文章等地方,加入代码,如果没有过滤或过滤不严,那么这些代码将储存到服务器中,用户 ...
- cv2.putText,cv2.rectangle方法
常用方法:cv2.putText(img,xy,(x1,y1), cv2.FONT_HERSHEY_PLAIN, 2, (0, 0, 255), thickness=2)img:要作用的图片xy:显示 ...
- vins_fusion学习笔记
Vins-Fusion源码:https://github.com/HKUST-Aerial-Robotics/VINS-Fusion 摘要 应项目需要,侧重学习stereo+gps融合 转载几篇写的比 ...
- MYSQL思维导图(转载)
图片来源:https://www.cnblogs.com/mutudou/p/11858477.html
- [转帖]龙芯3A4000处理器实测:28nm工艺不变 性能仍可提升100%以上
龙芯3A4000处理器实测:28nm工艺不变 性能仍可提升100%以上 http://news.mydrivers.com/1/663/663122.htm 龙芯是中科院下属的计算机所研发的自主产权国 ...
- protobuf 中import 的使用
目录结构如下: test.proto的文件内容如下: syntax="proto2"; package com.eagle.mohrss; option java_outer_cl ...
- WebUploader 上传文件 错误总结
近日做文件上传,粗心的问题和技术不精的问题导致了很多的bug,大部分时间都是在找自己写出来的bug,近日总结一下使用 WebUploader 开启分片上传的使用方法以及注意事项 1.上传过程中,后续上 ...
- python 练习题:使用迭代查找一个list中最小和最大值,并返回一个tuple
# -*- coding: utf-8 -*- # 请使用迭代查找一个list中最小和最大值,并返回一个tuple from collections import Iterable def findM ...
- BAT: 获取时间有空格问题
最近在项目上需要把文件定时备份,用BAT文件来自动生成文件夹名,精确到秒: bat脚本时间设定如下: pushd E:\Test set T=%date:~0,10%-%time:~0,2%%time ...
- STM (软件事务内存)