下载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. ThinkPHP5基础学习(慕课版)

    一.thinkphp 5.0 的安装及配置 二.URL和路由 三.请求和相应 四.视图和模板 五.数据库的操作 六.模型的操作

  2. 第26月第23天 nsobject 单例 CFAbsoluteTimeGetCurrent

    1.nsobject 单例 sudo chmod 666 /Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Resources/ ...

  3. Vue项目在表单中限制输入数字

    <template> <div> <input v-model="userPhone" autofocus type="text" ...

  4. 6-11数据库mysql初始

    1,什么是数据(DATA)? 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 2,什么是数据库? ...

  5. 用CSS将select/option文本居中

    <select> <option value="0">0</option> <option value="1"> ...

  6. 20165231 2017-2018-2 《Java程序设计》第6周学习总结

    教材学习内容总结 第八章 String类 Java专门提供了用来处理字符序列的String类. String类在java.lang包中,由于java.lang包中的类被默认引入,因此程序可以直接使用S ...

  7. 关于Mac或Linux下GO的Permission denied提示错误

    有时候当你下载第三方库的时候,编译时会提示Permission denied 权限不足, 出现这种错误因为权限不够.其中一种办法是需要把你项目目录和go的pck.bin权限放开. chmod -R 7 ...

  8. HDOJ 1166 敌兵布阵 (线段树)

    题目: Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Ti ...

  9. 【python 网络爬虫】之scrapy系列

    网络爬虫之scripy系列 [scrapy网络爬虫]之0 爬虫与反扒 [scrapy网络爬虫]之一 scrapy框架简介和基础应用 [scrapy网络爬虫]之二 持久化操作 [scrapy网络爬虫]之 ...

  10. LwIP Application Developers Manual6---Application API layers

    1.前言 lwIP提供3种应用编程接口来跟TCP/IP内核通信,如下所示: 低水平的内核/回调或raw API 2个高水平序列API: 1) netconn API 2) socket API(为了兼 ...