项目当中遇到了任意拖动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. A1041 Be Unique (20 分)

    一.技术总结 这题在思考的时候遇见了,不知道怎么处理输入顺序问题,虽然有记录每个的次数,事后再反过来需要出现一次的且在第一次出现, 这时我们其实可以使用另一个数组用来存储输入顺序的字符,然后再用另一个 ...

  2. JavaWeb 笔记

    WEB-INF 目录 web.xml 文件配置 精准匹配 "/" "/index" "/go/index.html" 路径通配匹配 &quo ...

  3. 第01组 Beta冲刺(3/5)

    队名:007 组长博客: https://www.cnblogs.com/Linrrui/p/12008397.html 作业博客: https://edu.cnblogs.com/campus/fz ...

  4. Linux系统运维笔记(6),CentOS 7.6双网卡路由配置

    Linux系统运维笔记(6),CentOS 7.6双网卡路由配置. 一,先确认系统版本: [root@localhost ~]# cat /etc/redhat-releaseCentOS Linux ...

  5. 动图+源码,演示 Java 中常用数据结构执行过程及原理

    ​阅读本文大概需要 3.7 分钟. 作者:大道方圆 cnblogs.com/xdecode/p/9321848.html 最近在整理数据结构方面的知识, 系统化看了下Java中常用数据结构, 突发奇想 ...

  6. WebStorm开发Vue自定义标签提示是未知标签解决办法

    打开 File -> Settings -> File Types 在右侧的窗口中找到Vue.js Template 并选中,在下面的窗口中添加 *.vue 即可解决问题. 修改后

  7. Oracle函数sys_connect_by_path用法

    sys_connect_by_path函数是为了配合递归查询的函数,递归查询可以参考我之前的博客:https://blog.csdn.net/u014427391/article/details/84 ...

  8. 排列组合(包括n中随机抽取m个)

    有些情况我们需要获取一个数组中的所有排列组合情况,或者获取一部分数据进行随机组合,这个在python中有一个模块可以实现.具体情况如下 :::::::::::::::::::::::::::::::: ...

  9. Nginx 变量参数

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  10. log4j2记录日志到数据库(完美支持mysql使用DruidDataSource)

    引用 log4j-core-2.12.1.jar log4j-web-2.12.1.jar 1:配置数据源 2:调用类 3:写入