关于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. ...
随机推荐
- EXAM-2018-7-29
EXAM-2018-7-29 未完成 [ ] H [ ] A D 莫名TLE 不在循环里写strlen()就行了 F 相减特判 水题 J 模拟一下就可以发现规律,o(n) K 每个数加一减一不变,用m ...
- KMP算法 详解+模板
本文大部分摘自szy学长的ppt<string>中的KMP部分. %%%膜拜szy大神orz 1.概述 KMP 算法是用来解决单模匹配问题的一种算法. 如果暴力的进行单模匹配,那么时间复杂 ...
- sqlserver 查询各个学生语文、数学、英语、历史课程成绩
-- 建表 插入数据 USE 你自己的数据库; CREATE TABLE Member( MID ) PRIMARY KEY, MName ) ); CREATE TABLE Course( FID ...
- json转换为go类文件，js脚本，nodejs执行
js写的代码生成脚本,json生成对应的go type对象 作json转换用 js脚本无甚何依赖,可以直接运行 执行前,按需更改文件 示例 var topname="Data"; ...
- vue项目中net::ERR_CONNECTION_TIMED_OUT错误
我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...
- 如果你有一个域名，你也可以免费有一个diy@yourdomain.com的企业邮局
如果你有一个域名,例如:www.bengou.net那么你可以拥有一个免费邮箱:lajiyoujian@bengou.net.那么什么是企业邮局呢?有啥优点 企业邮局是指以您的域名作为后缀的电子邮件地 ...
- 吴裕雄--天生自然python学习笔记：案例：用正则表达式查找邮件账号
抓取万水书苑“ ht甲://www.w sbookshow.com/ ”网站中的所有 E-mai l 账号. import requests,re regex = re.compile('[a-zA- ...
- spring学习笔记一:spring介绍
jar包下载地址:http://repo.spring.io/release/org/springframework/spring/ spring特点: 1.非侵入性 spring框架的API不会在业 ...
- jQuery 源码学习 - 02 - jQuery.fn.extend 与 jQuery.extend
参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. extend 方法在 jQuery 中是一个很重要的方法.jQuery 内部用它来拓展静态方法或者 ...
- LeetCode43(字符串相乘)
题目: 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2", ...