学习js，自个儿写的一个拖拽-JavaSript-爱易网页

学习js，自个儿写的一个拖拽

日期：2014-05-16　浏览次数：20332 次

学习js，自己写的一个拖拽
拖拽时候碰到其他div会交换位置，碰到多个div，自动选择重合面积最大的div进行交换。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag</title>
<style>
#div1 {width:100px;height:100px;border:1px solid #000;background-color:red;position:absolute;left:0px;top:0px}
#div2 {width:100px;height:100px;border:1px solid #000;background-color:green;position:absolute;left:100px;top:150px}
#div3 {width:100px;height:100px;border:1px solid #000;background-color:pink;position:absolute;left:200px;top:150px}
#div4 {width:100px;height:100px;border:1px solid #000;background-color:blue;position:absolute;left:300px;top:150px}
#div5 {width:100px;height:100px;border:1px solid #000;background-color:yellow;position:absolute;left:400px;top:150px}
</style>
<script>
<!-------定义常用操作---->
function o(id)
{
	return document.getElementById(id)
}

function getByClass(sClass,oParent)
{
	oParent = oParent ? oParent : document;
	var aEle=oParent.getElementsByTagName('*');
	var aResult=[];
	
	for(var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i])
		}
	}
	return aResult;
}

//获取样式、、兼容
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];	
	}else{
		return getComputedStyle(obj,false)[name]
	}
}

//运动框架
function startMove(obj,json,FnEnd)
{
	clearInterval(obj.timer)
	
	obj.timer=setInterval(function(){
		var bStop=true;
		
		for(var attr in json)
		{
			var cur=0;
		
			if(attr=='opacity')
			{
				cur=Math.round(parseFloat(getStyle(obj,attr))*100)
			}else if(attr=='transform')
			{
				var reg=/\-?[0-9]+\.?[0-9]*/g;
				cur=Math.round(getStyle(obj,attr).match(reg)[0]*10);
			}else{
				cur=parseInt(getStyle(obj,attr))
			}
			
			var speed=(json[attr]-cur)/10;
			speed=(speed>0)?Math.ceil(speed):Math.floor(speed)
			
			if(cur!=json[attr]) bStop=false;
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}else if(attr=='transform')
			{
				obj.style.webkitTransform='rotate('+(cur+speed)+'deg)';
			}else{
				obj.style[attr]=cur+speed+'px';
			}
		
		}
		
		if(bStop==true)
		{
			clearInterval(obj.timer);
			
			if(FnEnd) FnEnd();
			
			
		}
	},30)
}
<!-------定义常用操作  end---->

<!-------拖拽---->
function drag(clssname)
{
	var _this=this;
	this.aDiv=getByClass(clssname);
	this.disX=0;
	this.disy=0;
	this.createObj=document.createElement('div');
	this.arrObj=[];
	this.arrArea={};
	
	for(var i=0;i<this.aDiv.length;i++){
		this.aDiv[i].onmousedown=function(ev){
			_this.dragStar(this,ev);
		}
	}
}

drag.prototype.dragStar=function(obj,ev)
{
	var _this=this;
	var oEv= document.event||ev;
	
	this.disX=oEv.clientX-obj.offsetLeft;
	this.disY=oEv.clientY-obj.offsetTop;
	this.createObj.style.position='absolute';
	this.createObj.style.left=obj.offsetLeft+'px';
	this.createObj.style.top=obj.offsetTop+'px';
	this.createObj.style.width=getStyle(obj,'width');
	this.createObj.style.height=getStyle(obj,'height');
	this.createObj.style.border='1px dotted #000'
	document.body.appendChild(this.createObj)
	
	document.onmousemove=function(ev){
		_this.draging(obj,ev);
	}
	document.onmouseup=function(){
		_this.dragEnd(obj,_this.selectObj());
	}
	return false;
}

drag.prototype.draging=function(obj,ev)
{
	var oEv=document.event||ev;
	var l=oEv.clientX-this.disX;
	var t=oEv.clientY-this.disY;
	
	
	if(l<0)
	{
		l=0;
	}
	if(l>document.documentElement.offsetWidh-obj.offsetWidth)
	{
		l=document.documentElement.offsetWidh-obj.offsetWidth;
	}
	this.createObj.style.left=l+'px';
	this.createObj.style.top=t+'px';
	
	this.searchDiv(obj);
}
drag.prototype.dragEnd=function(obj1,obj2)
{
	document.onmousemove=null;
	document.onmouseup=null;
	for(va

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

学习js，自个儿写的一个拖拽

相关资料更多>

推荐阅读更多>