软件开发培训班 >> 编程开发 >> JavaScript

JS 拖动效果实现代码比较简单

　　本文标签：JS,拖动效果

<!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> 
<title>JS拖动效果</title> 
<script type="text/javascript"><!-- 
function DragPanel(Panel,event) 
{ 
var delayX=event.clientX-parseInt(Panel.style.left); 
var delayY=event.clientY-parseInt(Panel.style.top);

document.attachEvent("onmousemove",HandleMove); 
document.attachEvent("onmouseup",HandleUp);

event.cancelBubble=true; 
event.returnValue=false;

function HandleMove(e) 
{ 
e=window.event; 
Panel.style.left=event.clientX-delayX+"px"; 
Panel.style.top=event.clientY-delayY+"px"; 
event.cancelBubble=true; 
} 
function HandleUp() 
{ 
document.detachEvent("onmousemove",HandleMove); 
document.detachEvent("onmouseup",HandleUp); 
} 
event.cancelBubble=true; 
}

// --></script> 
</head> 
<body> 
<div style="position:absolute; width:200px; height:150px; left:100px; top:300px; background-color:Maroon;"> 
<div style="background-color:Red;" style="background-color:Red;" onmousedown="DragPanel(this.parentNode,event)">Drag Me</div> 
</div> 
</body> 
</html>

技术文章快速查找

Google AJAX 搜索 API实现代码

jquery-easyui关闭tab自动切换到前一个tab

跟我学Node.js（四）---Node.js的模块载入方式与机制

JS CSS制作饱含热情的镶边文字闪烁特效

基于jquery的一个拖拽到指定区域内的效果

JS 用6N±1法求素数实例教程

jQuery 设置 CSS 属性示例介绍

js 图片随机不定向浮动的实现代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

JS 拖动效果实现代码 比较简单

JS 拖动效果实现代码比较简单