拖拽的实现

最新推荐文章于 2023-08-18 22:20:23 发布

原创最新推荐文章于 2023-08-18 22:20:23 发布 · 465 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#div #class #function #javascript #generator #html

                                                             要实现拖拽元素必须调用四个函数
      A：onmouseover（作用：当鼠标移动到上面的时候，获得该元素，即把它赋给一个公共变量A，以便在鼠标放开的时候调用，每个要移动位置的元素都要调用）
      B：onmousedown（作用：当鼠标按下的时候，获得该元素赋给一个公共变量B，在鼠标移动的时候改变其位置和在鼠标放开的时候调用）
      C：onmousemove（作用：当鼠标移动的时候，改变公共变量B的位置）
      D：onmousedown（作用：当移动到另一个元素上面的时候，这时候会再次调用onmouseover，给公共变量A再次赋值，覆盖原来的值，这时候调用nsertBefore或者apendChild函数，交换公共变量A和公共变量B位置，这样就实现了拖拽，简单哦！呵呵）

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

<title>DropLayer2</title>

<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">

<meta name="CODE_LANGUAGE" Content="C#">

<meta name="vs_defaultClientScript" content="JavaScript">

<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

<style type="text/css">

div

{

border-right: lightgrey thin solid;

border-top: lightgrey thin solid;

font-weight: bold;

z-index: 2;

text-transform: capitalize;

border-left: lightgrey thin solid;

color: white;

border-bottom: lightgrey thin solid;

background-color: red;

}

</style>

</head>

<body>

<div id="parentDiv" class="parentCss" style="width:100">

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 1">one 1</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 2">two 2</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 3">three 3</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 4">four 4</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 5">five 5</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 6">six 6</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 7">seven 7</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 8">eight 8</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 9">nine 9</div>

<div class="itemCss" onmouseover="InsertDiv(this)" id = "nine 10">ten 10</div>

</div>

<script language="javascript">

<!--

var obj,obj2; //引发事件对象

var rootNode; //控制对象根节点

var IsDrag=false; //是否抓起

var NullDiv; //空临时层

var x,y; //鼠标与控件的相对坐标

window.onload = Prepare; //窗体加载时委托到Prepare

function Prepare()

{

//生成临时层，并设置其属性

NullDiv = document.createElement("div");

//获得控制对象的根节点元素

rootNode = document.getElementById("parentDiv");

document.onmousemove=MoveIt; //当鼠标在文档上移动时事件委托到MoveIt

document.onmousedown=Drag; //当鼠标按下时事件委托到Drag

document.onmouseup=Release; //当鼠标释放台起时事件委托到Release

}

function Drag()

{

obj = event.srcElement;

x=0;//event.offsetX;

y=0;//event.offsetY;

obj.style.position='absolute';

obj.style.posTop=event.y-y;

obj.style.posLeft=event.x-x;

IsDrag=true;

}

function MoveIt()

{

//window.status = event.x+"|"+event.y+"|"+IsDrag+"|"+x+"|"+y;

if(IsDrag)

{

obj.style.posTop=event.y-y;

obj.style.posLeft=event.x-x;

}

}

function Release()

{

IsDrag=false;

NullDiv.style.display='none';

obj.style.position='';

rootNode.insertBefore(obj,obj2);

}

function InsertDiv(o)

{

if(IsDrag)

{

obj2=o;

NullDiv.style.display='';

NullDiv.style.height='18';

NullDiv.style.width='100';

rootNode.appendChild(NullDiv,obj2);

}

}

//-->

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。