`
slpi1
  • 浏览: 2310 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

学习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(var i=0;i< this.arrObj.length;i++){
		startMove(this.arrObj[i],{opacity:100},false)
	}
	if(obj2&&this.arrObj.length>0){
		startMove(obj1,{left:obj2.offsetLeft,top:obj2.offsetTop},false);
		startMove(obj2,{left:obj1.offsetLeft,top:obj1.offsetTop,opacity:100},false);
	}else{
		startMove(obj1,{left:this.createObj.offsetLeft,top:this.createObj.offsetTop},false);	
	}
	document.body.removeChild(this.createObj);
	this.arrObj.length=0;
	this.arrArea={};
}	

//判断重合的方法,计算重合面积
drag.prototype.ifChange=function(obj1,obj2,num)
{
	
	var createPos={
		left:parseInt(this.createObj.offsetLeft),
		top:parseInt(this.createObj.offsetTop),
		right:parseInt(this.createObj.offsetLeft)+parseInt(getStyle(this.createObj,'width')),
		bottom:parseInt(this.createObj.offsetTop)+parseInt(getStyle(this.createObj,'height'))
		
	}
	var div2Pos={
		left:parseInt(obj2.offsetLeft),
		top:parseInt(obj2.offsetTop),
		right:parseInt(obj2.offsetLeft)+parseInt(getStyle(obj2,'width')),
		bottom:parseInt(obj2.offsetTop)+parseInt(getStyle(obj2,'height'))
		
	}
	
	var s=(createPos.left<=div2Pos.right)&&(createPos.top<=div2Pos.bottom)&&(createPos.right>=div2Pos.left)&&(createPos.bottom>=div2Pos.top); 
	
	var hor=[createPos.top,createPos.bottom,div2Pos.top,div2Pos.bottom].sort(function(a,b){return a-b});
	var ver=[createPos.left,createPos.right,div2Pos.left,div2Pos.right].sort(function(a,b){return a-b});
	
	var area=Math.abs(hor[1]-hor[2])*Math.abs(ver[1]-ver[2])
	
	if(s){
		if(obj1===obj2){
		}else{
			startMove(obj2,{opacity:50},false);
			this.arrObj.push(obj2);
			this.arrArea[num]=area;
		}
	}else{
		startMove(obj2,{opacity:100},false);
		this.arrArea[num]=0;
	}
}

//匹配拖拽过程中碰到(重合)的div
drag.prototype.searchDiv=function(obj)
{
	this.arrObj.length=0;
	for(var i=0;i<this.aDiv.length;i++){
		this.ifChange(obj,this.aDiv[i],i);
	}
	
}

//选择重合面积最大的div
drag.prototype.selectObj=function()
{
	var a=0;
	var str=-1;
	if(this.arrObj){
		for(var i in this.arrArea){
			a=(a>this.arrArea[i])?a:this.arrArea[i];
			str=(a>this.arrArea[i])?str:i;
		}
	}
	if(a=0){//无碰撞
		return null;
	}else{
		return this.aDiv[str];
	}
}

<!-------拖拽 end---->
window.onload=function(){
	new drag('bs');
}
</script>
</head>

<body>
<div id="div1" class="bs">1</div>
<div id="div2" class="bs">2</div>
<div id="div3" class="bs">3</div>
<div id="div4" class="bs">4</div>
<div id="div5" class="bs">5</div>
</body>
</html>
分享到:
评论

相关推荐

    js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml

    通过这个例子,开发者可以学习到如何实现JavaScript拖拽功能,以及如何与不同的数据存储机制集成,从而在实际项目中灵活应用。 总的来说,这个主题涵盖了JavaScript事件处理、DOM操作、数据序列化、Ajax通信以及...

    JS时间拖动条

    在JavaScript(JS)编程中,实现一个时间拖动条功能是一项常见的需求,特别是在涉及到多媒体播放、视频剪辑或时间控制的场景中。本项目“JS时间拖动条”旨在模仿QQ影音中的视频剪辑拖动条,提供用户友好的交互体验。...

    纯js实现可拖拽和点击的悬浮球

    在JavaScript编程中,创建一个可拖拽和点击的悬浮球是一项常见的交互设计任务。这个功能主要应用于各种网页应用,如在线聊天工具、控制面板或游戏等。本文将深入讲解如何利用JavaScript实现这样的功能。 首先,我们...

    js 模拟手机桌面,拖拽、合并文件、换位置

    1. `dragstart`: 当用户开始拖动一个元素时触发。 2. `drag`: 在拖动过程中持续触发。 3. `dragenter`、`dragover`: 当拖动的元素进入另一个可接受拖放的目标元素时触发,常用于处理允许拖放的判定。 4. `dragleave`...

    JQ JS javascript layui UI组件 元素 div 拖动插件

    本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...

    自己学习用JS实现拖动

    这段代码展示了基本的拖动逻辑,适用于网页中的任何可移动元素,如本例中的一个包含欢迎信息的div。 ### JS实现拖动的关键点 #### 1. 事件监听与触发 在JavaScript中,拖动功能主要依赖于`mousedown`、`mousemove...

    js 仿 igoogle 拖拽 效果

    7. **可拖动元素标识**:为了让JavaScript知道哪些元素可以被拖动,可以添加一个特定的CSS类或者数据属性到可拖动元素上,然后在JavaScript中根据这个标识来处理拖拽逻辑。 在实际开发中,为了使代码更简洁和易于...

    一个自己写的可以拖动的层

    标题中的“一个自己写的可以拖动的层”指的是在网页开发中实现的一种交互功能,即创建了一个可拖动的HTML层(Layer)。这种层通常是一个包含特定内容的div元素,用户可以通过鼠标点击并拖动来改变其在页面上的位置。...

    JS完美拖拽+拖动改变Div的宽高+关闭按钮

    提供的压缩包中的`完美拖拽拖动改变Div的宽高关闭按钮.html`文件包含了实现上述功能的HTML、CSS和JavaScript代码。通过阅读和理解这段代码,可以深入学习到如何结合HTML布局、CSS样式和JavaScript事件处理来创建...

    手写拖拽demo,高手绕路

    本示例“手写拖拽demo”是为初学者设计的一个教学项目,旨在帮助他们理解和掌握如何使用JavaScript实现元素的拖放功能。在这个过程中,我们将探讨一些关键的JavaScript概念和相关技术。 首先,我们要了解DOM...

    JS 拖拽的2个例子 各有优缺点

    在这个示例中,开发者可能使用纯JavaScript实现了一个可拖动的div元素。基本思路通常是监听鼠标事件,如`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)。当用户按下鼠标并移动时,div会...

    javascript图片预览(滚动放大缩小和拖动查看)

    `jquery.js`是jQuery库的引用,它是一个强大的JavaScript库,简化了DOM操作、事件处理和动画制作。在这个例子中,jQuery可能被用来绑定滚动、拖动和鼠标滚轮事件,实现图片的动态预览。 `ext-watchimg.js`是自定义...

    页面 JS 拖拽效果。。。

    1. `dragstart`: 当用户开始拖动一个元素时,这个事件会被触发。通常在这个事件中,我们需要设置被拖动元素的数据类型(`dataTransfer.setData()`),以便在后续的`drop`事件中识别和处理数据。 2. `drag`: 在拖动...

    javascript拖拽图片到指定位置

    拖放是Web开发中的一个功能,允许用户通过鼠标或触摸设备抓取元素并将其移动到另一位置。在HTML5中,这个功能得到了原生支持,因此我们可以利用JavaScript和jQuery的API来实现这一特性。 1. **HTML结构**: 在HTML...

    JTopo拖拽生成.zip_directly13s_js 拖拽 连线_jtopo 拖拽_jtopo 线动画_jtopo图标灰化

    总之,JTopo是一个强大的工具,它的拖拽功能、连线操作、线动画以及图标灰化等特性,使得它在构建网络拓扑图、流程图、实体关系图等可视化场景中具有广泛的应用价值。开发者可以通过学习和实践,利用JTopo轻松创建出...

    一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子

    "一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案,让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示,允许用户通过拖动列头来...

    js百度地图放大缩小拖拽查看效果

    在JavaScript(js)编程中,实现百度地图的放大、缩小和拖拽查看功能是一项常见的需求。这涉及到对百度地图API的深入理解和应用。百度地图API是百度提供的一套用于开发地图应用的JavaScript库,它允许开发者在网页上...

    JS拖拽DEMO大全

    JavaScript(简称JS)拖拽功能是网页交互中的一个重要部分,它可以增强用户体验,使得用户可以通过鼠标操作页面元素,如图片、窗口或自定义对象等。在本"JS拖拽DEMO大全"中,我们将会探讨一系列关于JavaScript实现...

    js拖拽排序-可以拖拽的DIV.rar

    在JavaScript(JS)中,实现一个可拖拽排序的DIV元素功能是一项常见的需求,尤其是在构建交互性强的Web应用时。这个“js拖拽排序-可以拖拽的DIV.rar”文件很可能是包含了一个或多个示例代码,用于演示如何在HTML页面...

    js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler

    "js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler"是一个专门针对视频播放控件进行优化的JavaScript实现,它旨在提供类似萤石云平台的时间标尺功能,使用户可以更直观地控制和浏览视频内容。这个功能允许用户...

Global site tag (gtag.js) - Google Analytics