javascript drag&drop beginning

javascript drag&drop beginning
首先我不赞成自己实现拖拽功能，因为比较麻烦，
建议用当下比较流行的一些库，用什么那就看项目需要了，
但是即便用别人的东西也只至少知道原理，所以我们先看看原理吧
如果想自己手动实现拖拽，那么我们先看看都要有哪些工作要做。
1 至少要获得鼠标的坐标吧，不然还干个屁。
2 至少要获得鼠标的动作吧，不然我怎么知道什么时候拖。什么时候停
3 在页面上拖动一个目标实际上就是，改变某个标签的坐标，当然一般也要适当改变
也些样式。所以你至少要知道一些css方面的知识。

1 鼠标坐标：look：

function mouseCoords(ev){
    if (ev.pageX || ev.pageY) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

唯一要解释的就是型参ev：ev实际就是windows.even:
调用这个函数：

document.onmousemove = mouseMove;
function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
} // mousePos.x就是横坐标，mousePos.y就是纵坐标

好了，就到这吧。
2 复习一下doument下面的都鼠标动作吧（当然只列出我们用的到的）
onmousedown:当焦点停留在当前元素上并且按下鼠标键时触发
onmousemove:当光标在当前元素上并且光标在当前元素上面移动时触发
onmouseout:当光标移出某个元素时触发
onmouseover:当贯标移动到某个元素上面时触发
onmouseup:当焦点在当前元素上并松开鼠标键时触发
下一步：搞清楚流程：
拖拽的流程：
捕获鼠标按下动作，之后判断鼠标按下所在的坐标是不是你想要的DOM对象，
如果是那么让这个对象的坐标跟着鼠标移动而改变，直到鼠标松开（onmouseup）。
根据这个流程，我们第一步要先把我们想要移动的DOM对象
记录下拉，而且我们必须把这个对象的style position
设置为absolute。

//定义监听函数
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
//存放我们想要拖动的DOM对象
var dragObject  = null;
var mouseOffset = null;
function mouseMove(ev){
	ev           = ev || window.event;
	//这里用到了上面第一点写的函数（mouseCoords）
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y;
		dragObject.style.left     = mousePos.x;

		return false;
	}
}
function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

这段代码的意思就是告诉浏览器页面上的哪些元素可以被拖动。
然后如果捕获的元素是允许被拖动的（即鼠标所在的区域
是这个元素的范围内），那么这个元素的坐标就
随着鼠标变化，直到鼠标弹起。
那么为了让鼠标知道哪些元素可以被拖动，我们需要制作
一个容器，盛放这些元素，并且写一个注册函数，把可以拖动
的元素注册到容器中：

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i<dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);
		
		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
				// dragObject was dropped onto curTarget!
		}
	}
	dragObject   = null;
}

所以如果你使用javascript lib，那么如果给某个元素增加拖动
属性，那么一般都可以捕获到 up 和 down事件，并可以在这些
事件中增加自己的动作。

评论

1 楼 kingjzd 2008-09-10  

MS LZ没写完 挺好的帖子