Архив

Публикации с меткой ‘drag & drop’
21 сентября 2010 2 комментария

Собственно Javascript:

var moveState = false;
var x0, y0;
var divX0, divY0;
function defPosition(event) {
	var x = y = 0;
	if (document.attachEvent != null) {
		x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	if (!document.attachEvent && document.addEventListener) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}
	return {x:x, y:y};
}
function initMove(div, event) {
	var event = event || window.event;
	x0 = defPosition(event).x;
	y0 = defPosition(event).y;
	//divX0 = parseInt(div.style.left);
	//divY0 = parseInt(div.style.top);
	divX0 = absPosition(div).x;
	divY0 = absPosition(div).y;
	moveState = true;
}
document.onmouseup = function() {
	moveState = false;
}
function moveHandler(div, event) {
	var event = event || window.event;
	if (moveState) {
		div.style.left = divX0 + defPosition(event).x - x0;
		div.style.top = divY0 + defPosition(event).y - y0;
	}
}
function makeFastDrag(div, event) {
	document.onmousemove = function(event) {
		moveHandler(div, event);
	}
}
function absPosition(obj) {
	var x = y = 0;
	while(obj) {
		x += obj.offsetLeft;
		y += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return {x:x, y:y};
}

HTML:

<div class='primer' onmousedown='initMove(this,event);' onmouseup = 'moveState = false;' onmousemove = 'makeFastDrag(this, event);'>Some Text</div>

CSS:

.primer {
	width: 150px;
	height: 100px;
	position: absolute;
	background: #000;
	cursor: move;
}

Использовались статьи:
http://fastcoder.org/articles/?aid=149
http://fastcoder.org/articles/?aid=16

Categories: Javascript Tags: ,