将元素拖放到目标区域的 JavaScript 示例

• 下载源代码 - 1.6 KB

引言

本文是之前我撰写的文章的续篇：跨浏览器拖放。 在那篇文章中，我提供了一个 JavaScript 拖放示例。 在这里，我想提供一个将元素拖放到**目标区域**的 JavaScript 示例，该示例可以在所有浏览器中工作（包括 Safari-iPad）。

本文面向喜欢深入了解底层原理，并且不使用像 jQuery 这样的第三方库的开发者。 使用第三方库并没有错 – 我只是更喜欢更大的灵活性。 对于喜欢底层原理的开发者，我推荐这个第三方库：Redips。

使用代码

要使用此脚本，请使用 SetupDragDrop JavaScript 函数。 它将根据使用的 CSS 类（Dragable 或 DropTarget）使一些 DIV 可拖动，另一些 DIV 成为拖放目标。 请注意，此示例演示了如何“捕获”元素，以便即使您移出元素或浏览器窗口之外也不会丢失它。 这是完整的 JavaScript 代码

var oDragTargets = [];
var oDragTarget = null;
var oDragItem = null;
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){
	SetupDragDrop();
}

function SetupDragDrop(){
	oDragTargets = [];
	
	var oList = document.getElementsByTagName("div");
	for(var i=0; i x && (oTarget.y + oTarget.h) > y){
			if (oDragTarget!=null && oDragTarget != oTarget.o) OnTargetOut();
			oDragTarget = oTarget.o;
			OnTargetOver();
			return;
		}
	}
	
	if (oDragTarget){
		OnTargetOut();
		oDragTarget = null;
	}
}

function TouchMove(e){
    e.preventDefault();
    var x = e.targetTouches[0].pageX - iClickOffsetX;
    var y = e.targetTouches[0].pageY - iClickOffsetY;
    oDragItem = e.targetTouches[0].target;
    HandleDragMove(x,y);
}

function DragStop(o,e){
	if (o.releaseCapture){
		o.releaseCapture();
	}else if (oDragItem){
		window.removeEventListener ("mousemove", DragMove2, true);
		window.removeEventListener ("mouseup",   DragStop2, true);
	}
	
	HandleDragStop();
}

function HandleDragStop(){
	if (oDragItem==null) return;

	if (oDragTarget){
		OnTargetOut();
		OnTargetDrop();
		oDragTarget = null;
	}
	
	oDragItem.style.zIndex = 1;
	oDragItem = null;
}

function TouchEnd(e){
	e.target.innerHTML = "TouchEnd";
	HandleDragStop();
}

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

function GetObjPos(obj){
	var x = 0;
	var y = 0;
	var o = obj;
	
	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, o:o};
}

//Drag and Drop Events
function OnTargetOver(){
	oDragTarget.style.border = "3px solid red";
}

function OnTargetOut(){
	oDragTarget.style.border = "";
}

function OnTargetDrop(){
	oDragItem.style.position="";
	oDragTarget.appendChild(oDragItem);
	if (navigator.platform=="iPad") MakeDragable(oDragItem);
}

我创建了两个 CSS 类，使可拖动元素不可选中，并使光标指示该元素可拖动。

.Dragable{
    cursor:move;
   -moz-user-select: -moz-none;   
   -khtml-user-select: none;   
   -webkit-user-select: none;   
   -o-user-select: none;   
   user-select: none;
   width: 100px; 
   height:20px; 
   padding: 3px;
}

.DropTarget{
    width: 200px; 
    height:200px; 
    background-color: LightBlue;
    border: 3px solid white;
}

希望这个示例对某人有所帮助。