项目当中遇到了任意拖动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提供的拖拽方法的更多相关文章

  1. jQuery UI API - 可拖拽小部件(Draggable Widget)(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

  2. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  3. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  4. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery.dragsort.js 实现拖拽过程遇到的问题

    .在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...

  6. JQuery UI Datepicker中文显示的方法

    出自:http://www.aimks.com/method-to-display-the-jquery-ui-datepicker-chinese.html Query UI Datepicker这 ...

  7. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

  8. PyQt5控件支持拖拽方法

    让控件支持拖拽动作A.setDragEnable(True) 设置A可以拖动B.setAcceptDrops(True) 设置B可以接受拖动B需要满足两个事件1.dragEnterEvent 将A拖到 ...

  9. jquery dragsort table实现拖拽排序

    转自:http://haoningabc.iteye.com/blog/1593640 dragsort官网地址:http://dragsort.codeplex.com/ html代码如下(需引入j ...

随机推荐

  1. <Stack> 150 71 388

    150. Evaluate Reverse Polish Notation class Solution { public int evalRPN(String[] tokens) { Stack&l ...

  2. mariadb指定10.2版本安装及修改默认端口

    原文链接: https://www.cnblogs.com/operationhome/p/9141881.html 延申, mongodb, mariadb:  https://www.cnblog ...

  3. Linux性能优化实战学习笔记:第五讲

    一.什么是CPU的使用率 1.你最常用什么指标来描述系统的CPU性能? 我想你的答案,可能不是平均负载,也不是CPU上下文切换,而是另一个更直观的指标CPU使用率 CPU使用率到底是怎么算出来的吗? ...

  4. [LeetCode] 925. Long Pressed Name 长按键入的名字

    Your friend is typing his name into a keyboard.  Sometimes, when typing a character c, the key might ...

  5. SpringBootThymeleaf案例

    一.添加依赖 <!-- 添加thymeleaf模版的依赖 --> <dependency> <groupId>org.springframework.boot< ...

  6. [转载]3.11 UiPath存在文本Text Exists的介绍和使用

    一.Text Exists的介绍 检查是否在给定的UI元素中找到了文本,输出的是一个布尔值 二.Text Exists在UiPath中的使用 1.打开设计器,在设计库中新建一个Sequence,为序列 ...

  7. Python连载29-log的使用需求实现举例

    一.Format类 1.直接实例化 2.可以继承Format添加特殊字符 3.三个参数 (1)fmt:指定消息格式化字符串,如果不指定该参数则默认使用message的原始值 (2)datemt:指定日 ...

  8. vs2019 更新之后无法用ctrl+d再设置回来..

    工具-选项-环境-键盘

  9. idea中maven项目打jar包

    从Eclipse换成Idea的小伙伴们可能会找不到Eclipse中Maven项目打jar包的方法,因为eclipse只需要在工程上点击右键,右键菜单中就有Maven打包的相关选项. 然而Idea的右键 ...

  10. Java学习:网络编程总结

    Java网络编程总结 一.概述 计算机网络是通过传输介质.通信设施和网络通信协议,把分散在不同地点的计算机设备互连起来,实现资源共享和数据传输的系统.网络编程就就是编写程序使联网的两个(或多个)设备( ...