<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<style>
.draggable{
width: 100px;
height: 100px;
position: absolute;
background: blue;
}
</style>
</head>
<body>
<div id='root' class='draggable'>
</div>
<script>
var root = document.getElementById('root');
//使用此对象处理浏览器的差异性
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;
}
},
getEvent: function(event){
return event ? event: window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
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;
}
}
}
//拖放
// EventUtil.addHandler(document,'mousemove',function(event){
// var root = document.getElementById('root');
// root.style.left = event.clientX + 'px';
// root.style.top = event.clientY + 'px';
// })
EventUtil.addHandler(document,'mousedown',function(){
DragDrop.enable();
});
var DragDrop = function(){
var dragging = null;
function handleEvent(event){
//获取事件和目标
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确定事件类型
console.log('event.type',event.type);
switch(event.type){
case 'mousedown':
if(target.className.indexOf('draggable')>-1){
dragging = target;
}
break;
case 'mousemove':
if(dragging !== null){
dragging.style.left = event.clientX + 'px';
dragging.style.top = event.clientY + 'px';
}
break;
case 'mouseup':
dragging = null;
break;
}
}
//公共接口
return {
enable: function(){
EventUtil.addHandler(document,'mousedown',handleEvent);
EventUtil.addHandler(document,'mousemove',handleEvent);
EventUtil.addHandler(document,'mouseup',handleEvent);
},
disable: function(){
EventUtil.removeHandler(document,'mousedown',handleEvent);
EventUtil.removeHandler(document,'mousemove',handleEvent);
EventUtil.removeHandler(document,'mouseup',handleEvent);
}
}
}()
</script>
</body>
</html>
拖放
最新推荐文章于 2024-05-20 15:25:36 发布