关于js拖放功能的实现
2024-10-08 21:41:31
这是具体的拖放代码的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>
【完】
无论多么难懂的书，读的次数多了，自然就懂了。
最新文章
- JavaScript学习笔记(三)——this、原型、javascript面向对象
- java中被各种XXUtil/XXUtils辅助类恶心到了，推荐这种命名方法
- NOSDK--一键打包的实现（四）
- 关于oracle的rowid
- Spring 定时执行任务重复执行多次
- 使用MiniProfiler调试ASP.NET MVC网站性能
- sql server 2012 自定义聚合函数(MAX_O3_8HOUR_ND) 计算最大的臭氧8小时滑动平均值
- 贴代码—CF230 DIV1 B
- Python integer objects implementation
- Java线程池--ThreadPoolExecutor
- Unity NGUI 图集Atlas制作
- nginx 502
- AFNetworking (3.1.0) 源码解析 <二>
- Best practice for Invoke other scripts or exe in PowerShell
- 从零开始学Xamarin.Forms(二) 环境搭建、创建项目
- Android的sdk、api及工程目录说明
- oracle查看执行最慢与查询次数最多的sql语句及其执行速度很慢的问题分析
- Python 爬虫实例（15） 爬取 汽车之家（汽车授权经销商）
- C#实现FTP文件的上传、下载功能、新建目录以及文件的删除
- gradle springboot 项目运行的三种方式