JavaScript实现拖动效果

最新推荐文章于 2025-07-03 12:22:13 发布

原创最新推荐文章于 2025-07-03 12:22:13 发布 · 930 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

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

标签

#javascript #null #function #border #div

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现拖动效果的方法，并提供了一个简单的示例代码。该方法通过监听鼠标事件来移动指定的DOM元素，但目前仅支持部分浏览器。

学习了一下用JavaScript实现拖动效果，找来网上的代码分析了一下然后照抄了个最简单的，将慢慢将它完善

现状：目前还不支持FireFox

不支持项（已知项）：pixelLeft、pixelTop、alpha(opacity=90)

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

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

*{font-size:12px}

.dragTable{

font-size:12px;

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

.dragTR{

cursor:move;

color:#7787cc;

background-color:#e5eef9;

}

td{vertical-align:top;}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

<script language="JavaScript" type="text/javascript">

/** 目标面板 */

var tarElement=null;

/** 实际被拖动面板 */

var dragElement=null;

/** 定义元素位置 */

var downX,downY,tmp_o_x,tmp_o_y;

var refElement=null;

var dragActive=0;

/** 是否在移动中 1为是 */

var draging=0;

function getEventElement (event){

if(event == null){

event = window.event;

}

return (event.srcElement ? event.srcElement : event.target);

}

/**

* onMouseDown触发事件

*/

function readyDrag(event) {

dragActive = 1;

var eventObj = getEventElement(event);

// 非DIV元素不能被拖动

if(eventObj.tagName != "DIV") return;

// 将目标元素附给dragElement

dragElement = eventObj.parentNode;

// 复制一个tmpElement到目标面板

tarElement = dragElement.cloneNode(true);

// TODO alpha(opacity=50)仅被IE支持

tarElement.style.filter="alpha(opacity=50)"

tarElement.style.zIndex=2;

dragElement.style.zIndxe=1;

tarElement.style.position="absolute";

if(dragElement.parentNode.tagName != "BODY"){

// 当选中可拖动元素时,初始化拖动元素的初始位置

// TODO pixelLeft仅被IE支持

dragElement.style.left = dragElement.offsetLeft + dragElement.parentNode.style.pixelLeft;

dragElement.style.top = dragElement.offsetTop + dragElement.parentNode.style.pixelTop;

}

//取得当前鼠标的绝对位置

downX=event.clientX;

downY=event.clientY;

//取得拖动元素当前的绝对位置

tmp_o_x=dragElement.style.pixelLeft;

tmp_o_y=dragElement.style.pixelTop;

tarElement.style.visibility="hidden";

document.body.appendChild(tarElement);

document.onmousemove=startDrag;

}

document.onmouseup=endDrag;

/**

* onMouseOver事件触发

*/

function startDrag(){

if(dragActive==1&&event.button==1&&dragElement!=null&&tarElement!=null){

//当拖动动作进行、mouse button pressed、拖动物件存在、目标面板存在的情况下

tarElement.style.visibility="visible";

tarElement.style.left=tmp_o_x+event.clientX-downX;

tarElement.style.top=tmp_o_y+event.clientY-downY;

dragElement.style.backgroundColor="#CCCCCC";

//游标样式

document.body.style.cursor="move";

draging=1;

}

}

/**

* onMouseUp时间触发

*/

function endDrag(){

if(dragActive==1&&tarElement!=null){

//当拖动动作进行、目标面板存在的情况下

if(draging==1){

// 如果面板处于移动状态中，将原有面板移除

dragElement.removeNode(true);

draging=0;

}

tarElement.style.filter="alpha(opacity=100)";

tarElement.style.zIndex=1;

document.body.style.cursor="default";

}

dragElement=null;

tarElement=null;

dragActive=0;

}

</script>

</HEAD>

<BODY>

<div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;">

<div onMouseDown="readyDrag(event)" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar">

Window

</div>

<div class="textSheet" style="border:1px solid #996666;">Content<br></div>

</div>

</BODY>

</HTML>

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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