下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下...

第一种拖拽方式-点击容器指定区域进行拖拽
$('.ui-dialog').on(DragEvent.types.start, '[i=title]', function(event) {
DragEvent.create($('.ui-dialog')[0], event);
}); 第二种拖拽方式-点击整个容器进行拖拽
DragEvent.create($('.ui-dialog')[0]); 拖拽的事件
var drag=DragEvent.create($('.ui-dialog')[0]);
drag.onstart=function(){
console.info("开始拖拽!");
};
drag.onover=function(){
console.info("拖拽中!");
};
drag.onend=function(){
console.info("拖拽结束!");
};

drag.js下载: https://gist.github.com/zhangzn3/396b4a5ae638892da37cc06216167a8f

好用的JS拖拽插件的更多相关文章

  1. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  4. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  5. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  6. vue拖拽插件(弹框拖拽)

    // =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. js拖拽效果

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

  9. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

随机推荐

  1. linux 普通用户下使用 jdk 、Tomcat

    需求: 在已经跑的 1.7java环境中需要跑1.8java环境所需要的tomcat,那么因为java环境的不同,nginx代理会出现很多问题,tomcat根本跑不起来,所以提供了以下解决方案. 一, ...

  2. python栈

    class StackEmptyError(Exception): pass class StackFullError(Exception): pass class Stack: def __init ...

  3. SQL SERVER 2008 R2安装的时候提示“该实例名称MSSQLSERVER已在使用

    SQL SERVER 2008安装的时候提示“该实例名称已在使用”解决办法._冷雨玫瑰_新浪博客---和这文章描述差不多http://blog.sina.com.cn/s/blog_672b419f0 ...

  4. Setup Mission End

    编写FPSGameMode 新建函数OnMissionComplete,并设置为蓝图可实现事件 UFUNCTION(BlueprintImplementableEvent,Category=" ...

  5. sonar排除实体类配置

    sonar覆盖率检查可以将一些实体类排除,maven项目可以在pom.xml文件中添加如下配置 <properties> <sonar.exclusions> src/main ...

  6. Effective C++ 笔记

    无参构造函数如何暴躁的构造. 先来看看标准的raw_memory : *sizeof(int)); // create int raw memory int *intVars = static_cas ...

  7. 算法:60.第k个排列

    解答参考:https://blog.csdn.net/lqcsp/article/details/23322951 题目链接:https://leetcode-cn.com/problems/perm ...

  8. addEventListener() 方法,事件监听

    知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...

  9. 华为Qinq的配置

    作者:邓聪聪 qinq(dot1q in dot1q)是一种二层环境中的二层vpn技术,用于二层ISP网络将相同客户网络中的vlan帧,再打一层vlan-tag的手段实现同一个客户的不同站点之间的数据 ...

  10. jvm 监控工具

    背景 不懂jvm监控工具好意思说自己搞java的吗.其实搞了十多年的人我都见过不懂得,不懂不要紧,老实工作就行啊.这就是属于非技术的话题了,实在不知从何说起.还是赶紧学习下吧,可以去装了.我认真学习后 ...