项目当中遇到了任意拖动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. xBIM之二:构建墙和门窗

    研究了两天,终于实现了利用xBIM自动输出墙和门窗 比较粗糙的源码如下: private void Form1_Load(object sender, EventArgs e) { //first c ...

  2. Spring IOC小记

    1. What IOC (Inversion Of Control,控制反转)与DI(Dependency Injecion,依赖注入) 用于对象间解耦,如在以前若对象A依赖B则需要在A中负责B的创建 ...

  3. sonatype nexus安装教程

    1. 安装nexus前需要先安装maven.(详见jdk安装教程)2. 将nexus-2.0.2.rar放到d:\teamwork中,点击右键,解压到当前文件夹中.其中包含两个文件夹:nexus,so ...

  4. 表单只有一项 input 时按回车键会提交表单

    在 Vue 中 使用 Element UI,使用表单  el-form 只有一个  el-input  项,使用  @keyup.enter.native 来处理回车事件. 结果发现按下回车时页面总会 ...

  5. 从头学一次J2EE笔记

    1.在Servlet3.5规范之前,Java Web 应用的绝大部分组件都通过web.xml 文件来配置管理, Servlet3.0 规范可通过Annotation来配置管理Web组件,因此web.x ...

  6. 2019 年 Java 最新面试指南共 80 题,赶快收藏起来吧!

    2019 年 Java 最新面试指南共 80 题,赶快收藏起来吧! http://blog.zh66.club/index.php/archives/116/

  7. Redis学习之对象系统源码分析

    背景知识: Redis并没有直接使用sds,双端链表,字典,压缩列表,跳表等这些数据结构来直接实现键值对数据库,而是基于这些对象创建了一个对象系统,这个对象系统包含5个对象:字符串对象,列表对象,哈希 ...

  8. pytest_demo_实战1

    1.根目录配置 pytest.ini [pytest] addopts = -p no:warnings 2.更改运行手势,系统配置 file -> setting -> Tools -& ...

  9. 【CTS2019】随机立方体(容斥)

    [CTS2019]随机立方体(容斥) 题面 LOJ 洛谷 题解 做这道题目的时候不难想到容斥的方面. 那么我们考虑怎么计算至少有\(k\)个极大值的方案数. 我们首先可以把\(k\)个极大值的位置给确 ...

  10. 【02】Python:数据类型和运算符

    写在前面的话 任何编程语言一开始都是从概念出发的,但各种编程语言之间的概念可能又会有差异,所以,老生常谈,我们还是需要从新过一遍 Python 的概念,当然,如果你已经是老司机了,完全可以一晃而过,不 ...