关于js拖放功能的实现
这是具体的拖放代码的HTML，里面依赖两个组件：EventUtil.js是兼容浏览器添加方法的库，EventTarget.js是一个发布-订阅者模式的对象库。
EventUtil.js:
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
};
EventTarget.js:
function EventTarget() {
this.handlers = {};
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function (type, handler) {
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function (event) {
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
},
removeHandler: function (type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i, 1);
}
}
};
以下是拖拽功能实现的全代码，功能性比较强大，支持在mousestart时候有回调，mousemove时候也有回调，mouseup时候trigger事件后执行之前的订阅回调。
<html>
<body>
<div class="draggable" id="myDiv"></div>
<div id="status"></div>
<style>
#myDiv {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
</style>
</body>
<script src="EventUtil.js"></script>
<script src="EventTarget.js"></script>
<script>
//event:传入的是事件类型
// EventUtil.addHandler(document, "mousemove", function (event) {
// var myDiv = document.getElementById("myDiv");
// myDiv.style.left = event.clientX + "px";
// myDiv.style.top = event.clientY + "px";
// });
var DragDrop = function () {
var dragdrop = new EventTarget(),
dragging = null,
diffX = 0,
diffY = 0; function handleEvent(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确定事件类型
switch (event.type) {
//鼠标按下
case "mousedown":
if (target.className.indexOf("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({
type: 'dragstart',
target: dragging,
x: event.clientX,
y: event.clientY
});
}
break;
//鼠标划过
case "mousemove":
if (dragging !== null) {
dragging.style.left = (event.clientX - diffX) + "px";
dragging.style.top = (event.clientY - diffY) + "px";
dragdrop.fire({
type: "drag",
target: dragging,
x: event.clientX,
y: event.clientY
});
}
break;
//鼠标放开
case "mouseup":
dragdrop.fire({
type: "dragend",
target: dragging,
x: event.clientX,
y: event.clientY
});
dragging = null;
break;
}
}
//公用接口
dragdrop.enable= function () {
EventUtil.addHandler(document, "mousedown", handleEvent);
EventUtil.addHandler(document, "mousemove", handleEvent);
EventUtil.addHandler(document, "mouseup", handleEvent);
},
dragdrop.disable = function () {
EventUtil.removeHandler(document, "mousedown", handleEvent);
EventUtil.removeHandler(document, "mousemove", handleEvent);
EventUtil.removeHandler(document, "mouseup", handleEvent);
}
return dragdrop
}()
DragDrop.addHandler("dragstart",function(event){
var status = document.getElementById('status');
status.innerHTML = 'Started dragging '+event.target.id;
})
DragDrop.addHandler("drag",function(event){
var status = document.getElementById('status');
status.innerHTML = `<br/>Dragged ${event.target.id} to ${event.x},${event.y}`;
})
DragDrop.addHandler("dragend",function(event){
var status = document.getElementById('status');
status.innerHTML = `<br/>Drapped ${event.target.id} at ${event.x},${event.y}`;
})
DragDrop.enable()
</script> </html>
【完】
无论多么难懂的书，读的次数多了，自然就懂了。
关于js拖放功能的实现的更多相关文章
- 脚本div实现拖放功能
脚本div实现拖放功能 网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等. 1.原生拖放实现 <!doctype html> <html lang="en" ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- Draggabilly – 轻松实现拖放功能（Drag & Drop）
Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...
- WPF拖放功能实现zz
写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...
- 如何使用LightningChart拖放功能进行数据转移 ?
本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...
- 小强的HTML5移动开发之路（16）——神奇的拖放功能
来自:http://blog.csdn.net/dawanganban/article/details/18181273 在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还 ...
- JavaScript如何实现拖放功能
1.在学习ExtJs时,对其拖放功能感到很陌生,然后找了个拖放功能实现. 转载地址 2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style. ...
随机推荐
- django项目导航页_20191128
django项目导航页_20191128 第一步:python-django电商项目-需求分析架构设计数据库设计_20191115 python-django-linux上mysql的安装和配置_20 ...
- PXE自动部署工具
1.工具介绍1.1::本工具主要以图形界面的方式帮助使用者快速部署PXE安装Linux的基础环境环境,(如不需要可忽略相关操作)并且支持自动配置静态IP地址和为H3C设备划分VLAN. 1.2::对于 ...
- Invalid action class configuration that references an unknown class问题原因之s:select
早先做个练习项目就出现了这个错误,各种查资料,然后各种尝试,依然没有解决,不过可以确定是前台页面导致的. 今天又碰到了这个问题,头疼啊!不能再略过了,使用最笨的方法,一个模块一个模块的排除.先看下我的 ...
- [LC] 268. Missing Number
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...
- DB2数据库多行一列转换成 一行一列
在db2中遇到多行一列转为一行一列的需求时,用db2函数 LISTAGG可以实现该功能.语法如下: SELECT [分组的字段 ] , LISTAGG([需要聚合的字段名], ',') FRO ...
- OpenCV Laplace 算子
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- whip|resist|patch|intimate|
a piece of leather or rope that is fastened to a stick, used for hitting animals or people 鞭子,皮鞭 She ...
- 吴裕雄--天生自然python学习笔记：Python CGI编程
什么是CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户 ...
- Heartbeat(注意iptables和selinux的问题)
安装 yum –y install heartbeat libnet配置 通过yum安装配置文件目录/etc/ha.d目录下没有配置文件需要从doc目录中复制三个文件.ha.cf.authkeys.h ...
- （二）Java数组的使用
Java数组 无序数组插入删除查询操作: public class ArrayList { private static int[] intArray; private int nElems; pub ...