项目当中遇到了任意拖动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. P3273 【[SCOI2011]棘手的操作】

    此题用可并堆勉强过,需加输入优化,但是这里有个问题就是set总是过不了一组数据,用multiset时间有点高,不懂这个问题,请懂此问题的给我留言. 左偏树+并查集 下面上代码: #include &l ...

  2. machine_math

    1.导数与函数的凹凸性关系: 从下往上看,如果函数是凸出来的就是凸函数,如果是凹的就是凹函数. 函数的凹凸性是二阶函数来判断的. 如果二阶函数大于零,那么就是凸函数,否则就是凹函数. 2.一阶导数为零 ...

  3. linux数据库中使用MD5加密

    MD5加密算法源码下载:https://pan.baidu.com/s/1nwyN0xV 下载完成了之后解压,得到两个文件 环境搭建: 1.把md5.h文件拷贝到/usr/include/目录下 su ...

  4. DP问题(1) : hdu 2577

    题目转自hdu 2577,题目传送门 题目大意: 现给你n个区分大小写的字符串,大小写可用Caps Lock和shift切换(学过计算机的都知道) 但是有一点需要注意(shift是切换,若现在是大写锁 ...

  5. kali linux2019.4 设置中文字体教程

    最近Kali linux更新到了2019.4版本,下载下来发现找不到设置中文的选项,经过在网上搜索一番发现一个开源的汉语字体包:文泉驿字体 在终端中输入以下命令 apt-get install ttf ...

  6. java web开发入门九(Maven使用&idea创建maven项目)基于intellig idea

    Maven 1.解决的问题 jar包的依赖和管理:版本.依赖关系等 自动构建项目 2.maven介绍 1.Maven是什么? Apache Maven是一个软件项目管理的综合工具.基于项目对象模型(P ...

  7. Linux内核定时器struct timer_list

    1.前言 Linux内核中的定时器是一个很常用的功能,某些需要周期性处理的工作都需要用到定时器.在Linux内核中,使用定时器功能比较简单,需要提供定时器的超时时间和超时后需要执行的处理函数. 2.常 ...

  8. 【前端知识体系-HTML相关】HTML基础知识强化总结

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  9. Reimage Isilon cluster,结果忘记了修改管理口的netmask,怎么办?

    网页打不开了,正常的SSH也连不上,只能用串口,连接到节点上. 然后使用运行下面的命令来修改netmask: isi network subnets modify groupnet0.subnet0 ...

  10. Android studio(AS) svg图片使用

    1.下载svg文件,https://www.iconfont.cn/阿里的2.通过AS - New - Vectro Asset转换成安卓可用的xml文件(ic_back.xml)3.配置Gradle ...