跨浏览器拖放

• 下载源代码 - 1.35 KB

引言

我找不到一个好的拖放 JavaScript 示例，能在所有浏览器（包括 iPad）上工作。所以我自己写了一个。希望对某人有所帮助。请注意，此示例演示了如何“捕获”元素，以便即使您移出元素或浏览器窗口之外也不会丢失它。

不幸的是，我找不到一种好的方法来避免在 Chrome 和 Safari 中丢失 iFrame 上的捕获。我找到的最佳方法是在拖动过程中用 DIV 覆盖所有 iFrame。 欢迎提出改进此方法的建议。

这篇文章面向那些喜欢深入研究细节，并且不使用第三方库（如 jQuery）的人。使用第三方库并没有错——我只是更喜欢灵活性。例如，您可以使用此示例来调整元素大小。

使用代码

要使用此脚本，请使用 MakeDragable JavaScript 函数。它仅接受一个参数：您希望用户拖动的元素的 ID。以下是完整的 JavaScript 代码

var oDragItem = null;
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){
	MakeDragable("idBox1");
	MakeDragable("idBox2");	
}

function MakeDragable(id){
	var oBox = $(id);
	oBox.className = "Dragable";
	
	if (navigator.platform=="iPad"){
		oBox.ontouchstart= function(e){TouchStart(e)};
		oBox.ontouchmove=function(e){TouchMove(e)};
	}else{
		oBox.onmousemove= function(e){DragMove(oBox,e)};
		oBox.onmouseup=function(e){DragStop(oBox,e)};
		oBox.onmousedown=function(e){DragStart(oBox,e);return false};	
	}	
}

function TouchStart(e){
	var oPos = GetObjPos(e.target);
	iClickOffsetX = e.targetTouches[0].pageX - oPos.x;
	iClickOffsetY = e.targetTouches[0].pageY - oPos.y;
}

function DragStart(o,e){
	if(!e) var e = window.event;
	oDragItem = o;
	
	if (e.offsetX){
		iClickOffsetX = e.offsetX;
		iClickOffsetY = e.offsetY;	
	}else{
		var oPos = GetObjPos(o);
		iClickOffsetX = e.clientX - oPos.x;
		iClickOffsetY = e.clientY - oPos.y;
	}
	
	if (o.setCapture){
		o.setCapture();
	}else{
		window.addEventListener ("mousemove", DragMove2, true);
		window.addEventListener ("mouseup",   DragStop2, true);
	}
}

function DragMove2(e){
	DragMove(oDragItem,e);
}

function DragStop2(e){
	DragStop(oDragItem,e);
}

function DragMove(o,e){
	if (oDragItem==null) return;

	if(!e) var e = window.event;
	var x = e.clientX + document.body.scrollLeft - document.body.clientLeft - iClickOffsetX;
	var y = e.clientY + document.body.scrollTop  - document.body.clientTop - iClickOffsetY;
	
	with(oDragItem.style){
		zIndex = 1000;
		position="absolute";
		left=x;
		top=y;
	}
}

function TouchMove(e){
    e.preventDefault();
    var curX = e.targetTouches[0].pageX - iClickOffsetX;
    var curY = e.targetTouches[0].pageY - iClickOffsetY; 
    
    var o = e.targetTouches[0].target;
    o.style.position = "absolute";
    o.style.top  = curY + 'px'; 
    o.style.left = curX + 'px'; 
}

function DragStop(o,e){
	if (oDragItem==null) return;

	if (o.releaseCapture){
		o.releaseCapture();
	}else if (oDragItem){
		window.removeEventListener ("mousemove", DragMove2, true);
		window.removeEventListener ("mouseup",   DragStop2, true);
	}
	
	oDragItem.style.zIndex = 1;
	oDragItem = null;
}

function $(s){
	return document.getElementById(s);
}

function GetObjPos(obj){
	var x = 0;
	var y = 0;
	
	var w = obj.offsetWidth;
	var h = obj.offsetHeight;
	if (obj.offsetParent) {
		x = obj.offsetLeft
		y = obj.offsetTop
		while (obj = obj.offsetParent){
			x += obj.offsetLeft;
			y += obj.offsetTop;
		}
	}
	return {x:x, y:y, w:w, h:h};
}

我创建了一个单一的 CSS 类，用于使可拖动元素不可选择，并使光标表明该元素是可拖动的。

<style>
.Dragable
{
   cursor:move;
   -moz-user-select: -moz-none;   
   -khtml-user-select: none;   
   -webkit-user-select: none;   
   -o-user-select: none;   
   user-select: none;
}

关注点

我还写了一篇相关的文章，名为：JavaScript 拖放至目标的示例