拖放是一种非常流行的用户界面模式。它的概念很简单：点击某个对象，并按住鼠标按钮不放，将鼠标移到到另一个区域，然后释放按钮将对象放到这里。
拖放的基本概念很简单：创建一个绝对定位的元素，使其可以用鼠标移到。
<body>
<div style="">
<div class="draggable" style="width:100px;height:100px;position:absolute;background:red">移动的div</div>
<div class="draggable" style="width:100px;height:100px;position:absolute;background:green;left:120px;">移动的div</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var DragDrop = function() {
var dragging = null;
var diffX = 0;
var diffY = 0;
function handleEvent(event) {
event = event || window.event;
var target = event.target;
switch (event.type) {
case "mousedown":
if (target.className.indexOf("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
}
break;
case "mousemove":
if (dragging !== null) {
dragging.style.left = event.clientX - diffX + "px";
dragging.style.top = event.clientY - diffY + "px"
}
break;
case "mouseup":
dragging = null;
break;
}
}
//公共接口
return {
enable: function() {
document.addEventListener("mousedown", handleEvent, false);
document.addEventListener("mousemove", handleEvent, false);
document.addEventListener("mouseup", handleEvent, false);
},
disable: function() {
document.removeEventListener("mousedown", handleEvent, false);
document.removeEventListener("mousemove", handleEvent, false);
document.removeEventListener("mouseup", handleEvent, false)
}
}
}
DragDrop().enable();
</script>
</body>
拖放功能还不能真正应用起来，除非能知道什么时候拖动开始了。从这点上看，前面的代码没有提供任何方法表示拖动开始、正在拖动或者已经结束。这时，可以使用自定义事件来指示这几个事件的发生，让应用的其他部分与拖动功能进行交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>拖放</title>
<style type="text/css">
.drap-container {
padding-top: 15px;
}
#dragWrap {
height: 100px;
background: #f2f2f2;
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: relative;
float: left;
margin-right: 20px;
padding: 10px;
}
.draggable {
width: 100px;
height: 100px;
position: absolute;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer;
}
.box1 {
background: #5972f1;
}
.box2 {
left: 120px;
background: #47bf6c;
}
#status {
height: 35px;
line-height: 35px;
background: #fdf5f0;
padding: 0 15px;
border: 1px solid #fde4d4;
margin-bottom: 10px;
}
@media(max-width:500px) {
#dragWrap {
width: 100%;
float: none;
}
}
</style>
</head>
<body class="">
<div class="container drap-container">
<div id="dragWrap">
<div class="draggable box1" id="box1">移动的div</div>
<div class="draggable box2" id="box2">移动的div</div>
</div>
<div id="status">status</div>
</div>
<script type="text/javascript">
function EventTarget() {
this.handlers = {}
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function(type, handler) {
console.log(type);
//刚开始只有type并没有为this.handlers[type]赋值
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
//console.log("hi")
}
//接着执行push
this.handlers[type].push(handler);
console.log(this.handlers[type]);
},
fire: function(event) {
if (!event.target) {
event.target = this;
//console.log("not have eventTarget")
}
if (this.handlers[event.type] instanceof Array) {
//console.log("isArray")
var handlers = this.handlers[event.type];
//循环执行多个事件
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
}
}
var DragDrop = function() {
var wrap = document.getElementById("dragWrap");
var dragdrop = new EventTarget();
var dragging = null;
var diffX = 0;
var diffY = 0;
var startEvt, moveEvt, endEvt;
if ("ontouchstart" in window) {
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend"
} else {
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
function handleEvent(event) {
//获取事件和对象
event = event || window.event;
var target = event.target;
//确定事件类型
switch (event.type) {
case startEvt:
if (target.className.indexOf("draggable") > -1) {
dragging = target;
console.log(event.clientX)
if (startEvt == "touchstart") {
console.log(event)
diffX = event.touches[0].clientX - target.offsetLeft;
diffY = event.touches[0].clientY - target.offsetTop;
dragdrop.fire({ type: "dragstart", target: dragging, x: event.touches[0].clientX, y: event.touches[0].clientY });
console.log(event.touches[0].clientX, event.touches[0].clientY)
} else {
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY });
}
}
break;
case moveEvt:
if (dragging !== null) {
if (moveEvt == "touchmove") {
event.preventDefault();
console.log(event)
dragging.style.left = event.touches[0].clientX - diffX + "px";
dragging.style.top = event.touches[0].clientY - diffY + "px";
console.log(event.touches[0].clientX, event.touches[0].clientY)
dragdrop.fire({ type: "drag", target: dragging, x: event.touches[0].clientX, y: event.touches[0].clientY })
} else {
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 endEvt:
if (endEvt == "touchend") {
console.log(endEvt)
console.log(event)
dragdrop.fire({ type: "dragend", target: dragging, x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY })
} else {
dragdrop.fire({ type: "dragend", target: dragging, x: event.clientX, y: event.clientY })
}
dragging = null;
break;
}
}
//公共接口
dragdrop.enable = function() {
wrap.addEventListener(startEvt, handleEvent, false);
wrap.addEventListener(moveEvt, handleEvent, false);
wrap.addEventListener(endEvt, handleEvent, false);
},
dragdrop.disable = function() {
wrap.removeEventListener(startEvt, handleEvent, false);
wrap.removeEventListener(moveEvt, handleEvent, false);
wrap.removeEventListener(endEvt, handleEvent, false)
}
return dragdrop
}();
//可以写成
//DragDrop=DragDrop()
//返回EventTarget{disable:ƒ (),enable:ƒ (),handlers:{drag:[f],dragend:[f],dragstart:[f]}}
//console.log(DragDrop)
DragDrop.enable();
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 = "Dragged " + event.target.id + " to(" + event.x + "," + event.y + ")";
});
DragDrop.addHandler("dragend", function(event) {
var status = document.getElementById("status");
status.innerHTML = "Dragged " + event.target.id + " at(" + event.x + "," + event.y + ")";
});
</script>
</body>
</html>
由于DragDrop对象是一个使用了模块模式的单例，所以需要进行一些更改来使用EventTarget类型。首先，创建一个新的EventTarget 对象，然后添加enable()和disable()方法，最后返回这个对象。