下载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. 基于TensorFlow Object Detection API进行相关开发的步骤

    *以下二/三.四步骤确保你当前的文件目录是以research文件夹为相对目录. 一/安装或升级protoc 查看protoc版本命令: protoc --version 如果发现版本低于2.6.0或运 ...

  2. UOJ #276「清华集训2016」汽水

    为什么你们常数都这么小啊 UOJ #276 题意:在树上找一条链使得|边权平均值$ -k$|尽量小,$ n<=5e4$ $ Solution:$ 首先二分答案$ ans$,即我们需要找一条链使得 ...

  3. 简单重写容器vector

    #pragma once #include <iostream> using namespace std; template<class T> class CMyVector ...

  4. js2wordcloud 词云包的使用

    js文件下载: https://github.com/liangbizhi/js2wordcloud/tree/master/ dist文件夹内 引用: <script src="** ...

  5. JDK在线API及常用工具类

    API http://tool.oschina.net/apidocs/apidoc?api=jdk-zh Java SE常用工具类 java.util.Arrays java.util.Collec ...

  6. 批量清除react中的计时器小组件

    在Timers的父组件被卸载时,批量清除各个计时器.

  7. 动态规划 - 213. House Robber II

    URL: https://leetcode.com/problems/house-robber-ii/ You are a professional robber planning to rob ho ...

  8. 使用@JsonView注解控制返回的Json属性

    我也是刚看到原来还可以这么玩,但是我还是习惯使用Dto,我总感觉这样做的话实体类耦合程度有点高.还是记录以下,万一今后用到了呢 ⒈在实体类中使用接口来声明该实体类的多个视图. ⒉在实体类的属性get方 ...

  9. 百度echarts样式开发

    Echarts如何进行实例化 var a1 = null; a1= echarts.init(document.getElementById('a1')); a1.setOption({ color: ...

  10. python判断字符串是字母 数字 大小写

    字符串.isalnum() 所有字符都是数字或者字母,为真返回 Ture,否则返回 False. 字符串.isalpha() 所有字符都是字母,为真返回 Ture,否则返回 False. 字符串.is ...