关于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. ...
随机推荐
- Nearby Bicycles
With fast developments of information and communication technology, many cities today have establish ...
- 用dfs序处理线段树的好题吗？
https://www.cnblogs.com/mountaink/p/9878918.html 分析:每次的选取必须选最优的一条链,那我们考虑一下选择这条链后,把这条路上的点的权值更新掉,再采取选最 ...
- UFT检查点
一.标准检查点 选择需要插入检查点的语句,点击右键,选择Insert Standard Checkpoint.... 二.图像检查点(Insert Standard Checkpoint....) 在 ...
- RabbitMQ传输原理、五种模式
本文代码基于SpringBoot,文末有代码连接 .首先是一些在Spring Boot的一些配置和概念,然后跟随代码看下五种模式 MQ两种消息传输方式,点对点(代码中的简单传递模式),发布/订阅(代码 ...
- deeplearning.ai 卷积神经网络 Week 3 目标检测
本周的主题是对象检测(object detection):不但需要检测出物体(image classification),还要能定位出在图片的具体位置(classification with loca ...
- Uber自动驾驶卡车正式运营，是否会给卡车司机彻底“宣判死刑”?
随着科技的快速迭进和嬗变,大众的生活也在被全面革新和改变.不过有些改变是显性的,比如PC和智能手机的出现.有些改变却是隐性的,比如太空科技.云计算等.而在当下,又一个看似与大众生活紧密相关,但一般人却 ...
- python标准库：ftplib模块
ftplib模块包含了文件传输协议(FTP)客户端的实现. 下面的例子展示了如何登入和获取进入目录的列表,dir函数传入一个回调函数,该回调函数在服务器相应时每一行调用一次.ftplib模块默认的回调 ...
- Ionic3学习笔记（十）实现夜间模式功能
本文为原创文章,转载请标明出处 目录 创建主题样式 导入 variables.scss 创建 provider 创建 page 在 App 入口处应用主题 效果图 1. 创建主题样式 在 ./src/ ...
- MongoDB启动.mongorc.js报错解决方法
在bin目录下输入./mongo --norc 不去加载.mongorc.js
- Opengl-法线贴图(用来细化表面的表现表现的凹凸)
我们通过这张图可以看出来,使用了法线贴图的物体表面更有细节更逼真,其实这就是发现贴图的作用,没什么钻牛角尖的. 其实表面没有凹凸的情况是因为我们把表面一直按照平整来做的,要想突出这个表面的凹凸就要用到 ...