【google play store】仿Google和Windows Live的拖拽

更新时间：2015-05-06 来源：Google 手机版 字体：大中小

【www.bbyears.com--Google】

提示：您可以先修改部分代码再运行

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body
{
    margin:10px;
}

#dragHelper
{
    position:absolute;/*重要*/
    border:2px dashed #000000;
    background-color:#FFFFFF;
	filter: alpha(opacity=30);
}

.normal
{
    position:absolute;/*重要*/
    width:300px;
    #height:10px;
    border:1px solid #666666;
    background-color:#FFFFFF;
}

.over
{
    position:absolute;/*重要*/
    width:300px;
    #height:10px;
    border:1px solid #666666;
    background-color:#f3f3f3;
	filter: alpha(opacity=50);
}

.dragArea {
	CURSOR: move;
}

</style>
</HEAD>

Cobao........- x
			地址:http://www.cobao.cn
			关键字:
			说明:

新浪........- x
			地址:http://www.sina.com.cn
			关键字:
			说明:

网易........- x
			地址:http://www.163.com
			关键字:
			说明:

QQ........- x
			地址:http://www.qq.com
			关键字:
			说明:

</BODY>
<script LANGUAGE="JavaScript">
<!--
var dragObjs = [];						//可以拖拽的元素数组
var dragObjTops = [];

var dragHelper = document.getElementById("dragHelper");					//拖拽时位置框
var dragObj = null;						//拖拽对象元素
var dragObjPos = 0;

var dragObjOffset = {left:0,top:0};		//拖拽对象原始位置
var mouseInDragObjOffset = {x:0,y:0};	//鼠标在拖拽对象中的相对位置

var initHeight = 40;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function getPosition(e){		//获取元素相对文档的绝对位置
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

left += e.offsetLeft;
	top  += e.offsetTop;

return {x:left, y:top};

}

function mouseCoords(ev){		//获取鼠标相对文档的绝对位置
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function getMouseOffset(target, ev){		//	获取鼠标相对元素的相对位置
	ev = ev || window.event;

var elementPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
}

function mouseDown(ev){
	ev = ev || window.event;
	target = ev.srcElement || ev.target;

if(dragObj){
		return;
	}

var dragArea = false;
	if(target.getAttribute("dragArea")){
		dragArea = true;
	}

while(!target.getAttribute("isDragObj")){
		if(target.tagName=="HTML")
			break;
		target = target.parentNode;
	}

if(dragArea && target.getAttribute("isDragObj")){
		dragObj = target;
		//重写的目的是让当前对象在最上层
		document.body.removeChild(dragObj);
		document.body.appendChild(dragObj);

//记录下拖拽对象原始位置
		dragObjOffset.left = dragObj.style.left;
		dragObjOffset.top = dragObj.style.top;

dragObj.className = dragObj.getAttribute("overClass");
		//鼠标在拖拽对象中的相对位置
		mouseInDragObjOffset = getMouseOffset(dragObj, ev);

dragHelper.style.left = dragObj.style.left;
		dragHelper.style.top = dragObj.style.top;
		dragHelper.style.width = dragObj.offsetWidth;
		dragHelper.style.height = dragObj.offsetHeight;
		dragHelper.style.display = "";

//alert(dragObj.offsetWidth+":"+dragObj.clientWidth);
	}
}

function mouseUp(ev){
	ev = ev || window.event;
	target = ev.srcElement || ev.target;

if(dragObj){
		dragObj.style.left = dragHelper.style.left;
		dragObj.style.top = dragHelper.style.top;

dragHelper.style.display = "none";
		dragObj.className = dragObj.getAttribute("dragClass");
		dragObj = null;
	}

}

function mouseMove(ev){
	ev = ev || window.event;

if(dragObj) {
		var mousePos = mouseCoords(ev);
		
		/*dragHelper.style.left = dragObjOffset.left;
		dragHelper.style.top = dragObjOffset.top;
		dragHelper.style.width = dragObj.offsetWidth;
		dragHelper.style.height = dragObj.offsetHeight;
		dragHelper.style.display = "";*/

var windowWidth = document.body.offsetWidth;		//窗口宽度
		var windowHeight = document.body.offsetHeight;		//窗口高度

//拖拽对象应该所在当前位置
		var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;
		var dragObjTop  = mousePos.y - mouseInDragObjOffset.y;

//增加判断，不然拖拽对象拖出<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>窗口
		if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)
			dragObj.style.left = dragObjLeft;

if(dragObjTop >=0)
			dragObj.style.top = dragObjTop;

repaint();
	}
}

//克隆对象
function cloneObject(srcObj, destObj){
	destObj = srcObj.cloneNode(true);
}

function makeDraggable(element){
	element.setAttribute("isDragObj", "y");
}

function repaint(){
	for(i=0; i<dragObjs.length; i++){
		if(dragObjs[i] == dragObj){
			dragObjPos = i;
			dragObjs[i] = dragHelper;
			break;
		}
	}

if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){
		dragObjs[dragObjPos] = dragObjs[dragObjPos-1];
		dragObjs[dragObjPos-1] = dragHelper;
		dragObjPos = dragObjPos - 1;
	}

if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){
		dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
		dragObjs[dragObjPos+1] = dragHelper;
		dragObjPos = dragObjPos + 1;
	}
	paintDragObjs();
	dragObjs[dragObjPos] = dragObj;

}

function paintDragObjs(){
	var h = 40;
	for(i=0; i<dragObjs.length; i++){
		dragObjs[i].style.left = 20;
		dragObjs[i].style.top = h;
		h += dragObjs[i].offsetHeight + 10;
	}
}

function openClose(obj){
	obj.innerHTML = obj.innerHTML=="-"?"+":"-";
	while(obj.tagName != "TBODY"){
		obj = obj.parentNode;
	}

for(i=0; i<obj.childNodes.length; i++){
		if(obj.childNodes[i].nodeName == "#text" 
			|| obj.childNodes[i].getAttribute("bar")){ continue; }
		obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";
	}

paintDragObjs();
}

document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;

window.onload = function(){
	var objs = document.getElementsByTagName("Div");
	for(i=0; i<objs.length; i++){
		var item = objs.item(i);
		//if(i==1)item.style.height=150;
		if(item.getAttribute("overClass")){
			makeDraggable(item);
			dragObjs.push(item);
			item.style.left = 20;
			item.style.top = initHeight;
			dragObjTops.push(initHeight);
			initHeight += item.offsetHeight + 10;
		}
	}

//	dragHelper = document.createElement("DIV");
//	dragHelper.style.cssText = "position:absolute;display:none;";
//	document.body.appendChild(dragHelper);
}
//-->
</script>
</HTML>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/seo/14892.html

链接：http://www.bbyears.com/seo/14892.html
【google play store】仿Google和Windows Live的拖拽(转载时请注明本文出处及链接)

猜你感兴趣

简单php生成工具_简单php生成 execel表格程序 2015-05-06
让你的窗口|让你的窗口跳起来 2015-05-06
flash文字动画_flash图片文字切换代码 2015-05-06
phpstudy|php curl_init函数用法 2015-05-06
【杨百万新浪博客】新浪博客的提示窗口 2015-05-06
【php简单实例】php简单模板技术 2015-05-06
【google学术搜索】模仿google搜索下拉框 2015-05-06
数千年来未有之变局_数千网站陷服务器维系窘境 2015-05-06
【澳大利亚可以用支付宝吗】支付宝扩张澳大利亚市场 2015-05-06
photoshop切图_photoshopqq空间边框教程 2015-05-06

本类排行

本类最新

更多>>

【google play store】仿Google和Windows Live的拖拽

猜你感兴趣

热门标签

本类排行

本类最新