拖放
拖放:就是点击某个对象,并按住鼠标按钮不放,将鼠标移动到另外一个区域,然后释放鼠标按钮将对象“放”在这里。
拖放的基本概念也很简单:创建一个绝对定位的元素,使其可以用鼠标移动。
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';
});
最简单的拖放界面可用以下代码实现:
var DragDrop = function(){
var dragging = null;
function handleEvent(event){
//获取事件和目标
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确定事件类型
switch(event.type){
case 'mousedown':
console.log('mousedown');
if(target.className.indexOf('box')> -1){
dragging = target;
}
break;
case 'mousemove':
console.log('mousemove');
if(dragging !== null){
//指定位置
dragging.style.left = event.clientX + 'px';
dragging.style.top = event.clientY + 'px';
}
break;
case 'mouseup':
console.log('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);
}
}
}()
DragDrop.enable();
提问:
1.会检查target的class是否包含’box’类,这个技巧可以很方便地通过标记语言而非JavaScript脚本来确定可拖动的元素。
if(target.className.indexOf('box')> -1){
dragging = target;
}
修缮拖动功能
var DragDrop = function(){
var dragging = null,diffX=0,diffY=0;
function handleEvent(event){
//获取事件和目标
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确定事件
switch(event.type){
case 'mousedown':
if(event.target.className.indexOf('box')>-1){
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
}
break;
case 'mousemove':
if(dragging !==null){
//dragging.style.left = event.clientX + 'px';
//dragging.style.top = event.clientY + 'px';
dragging.style.left = event.clientX - diffX + 'px';
dragging.style.top = event.clientY - diffY + 'px';
}
break;
case 'mouseup':
dragging = null;
break;
}
}
return {
enable: function(event){
EventUtil.addHandle(document,'mousedown',handleEvent);
EventUtil.addHandle(document,'mousemove',handleEvent);
EventUtil.addHandle(document,'mouseup',handleEvent);
},
disable: function(event){
EventUtil.removeHandle(document,'mousedown',handleEvent);
EventUtil.removeHandle(document,'mousemove',handleEvent);
EventUtil.removeHandle(document,'mouseup',handleEvent);
}
}
}()
DragDrop.enable();