下载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如何查看端口号被哪个进程占用

    1.lsof -i:端口号 lsof(list open files) 2.netstat -tunlp |grep 端口号 t:tcp u:udp n:拒绝显示别名 l:仅显示listen的服务状态 ...

  2. ubuntu16.04配置anaconda环境

    0 - 下载安装包 推荐到清华镜像下载.我选择的是Anaconda3-5.1.0-Linux-x86_64.sh. 1 - 安装Anaconda 然后切换到安装包目录,执行下面命令,期间一直按回车或者 ...

  3. 解码base64加密的图片并打印到前台

    经过base64加密的图片对象是一串字符串,我们解码后可通过流将其打印出来: utils类: package com.aebiz.app.web.modules.controllers.open.ap ...

  4. SFTP客户端代码示例

    参考链接:SFTP客户端代码示例 操作系统:Windows7/8,VS2013 环境:libssh2 1.4.3.zlib-1.2.8.openssl-1.0.1g 原文: “从http://www. ...

  5. nodejs -Router

    Node 用 request 事件来处理请求响应,事件内使用分支语句处理不同路径的请求,而 Express 封装了这些操作,使得代码简洁优雅 但如果请求路径变多,都写在 app.js 文件里的话,就会 ...

  6. 使用PHP、MySQL实现修改密码 + 防止通过url强行进入系统

    ●使用PHP+MySQL实现修改密码 页面: index.php  登陆页面,输入默认密码登陆系统 check.php 核查页面,通过查询数据库检测密码是否正确   ——> 正确,则进入系统   ...

  7. Xilinx原语学习之时钟资源相关原语

    一直来,都是使用Vivado中自带的GMIItoRGMII IP核来完成GMII转RGMII的功能:尽管对GMII及RGMII协议都有一定的了解,但从没用代码实现过其功能.由于使用IP时,会涉及到MD ...

  8. Linux RTC驱动模型分析之rtc-sysfs.c【转】

    转自:https://blog.csdn.net/longwang155069/article/details/52353408 版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  9. python3+selenium框架设计04-封装测试基类

    在完成了日志类封装之后,那我们就要对测试基类进行实现,在其中对一些请求再次封装,在项目下新建一个framework文件夹,在文件夹下新建Base_Page.py文件,这是用来写测试基类的文件.在项目下 ...

  10. 题解-USACO18DEC Balance Beam详细证明

    (翻了翻其他的题解,觉得它们没讲清楚这个策略的正确性) Problem 洛谷5155 题意概要:给定一个长为\(n\)的序列,可以选择以\(\frac 12\)的概率进行左右移动,也可以结束并得到当前 ...