<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0056)http://www.cainiao8.com/web/js_examples/tuozhuai_ex.html -->
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>JavaScript拖拽示例网页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content=JavaScript拖拽文章的配套示例网页。网页内有一个可以拖拽的div。 name=Description>
<META content=拖拽,实例,DOM,JavaScript,JScript name=Keywords>
<SCRIPT type=text/javascript>
var dragging = false;
var test;
var mouseY;
var mouseX;
window.onload = function(){
test = document.getElementById("test");
test.onmousedown = down;
test.onmousemove = move;
document.onmouseup = up;
test.style.position = "relative";
test.style.top = "0px";
test.style.left = "0px";
}
function down(event)
{
event = event || window.event;
dragging = true;
mouseX = parseInt(event.clientX);
mouseY = parseInt(event.clientY);
objY = parseInt(test.style.top);
objX = parseInt(test.style.left);
}
function move(event){
event = event || window.event;
if(dragging == true){
var x,y;
y = event.clientY - mouseY + objY;
x = event.clientX - mouseX + objX;
test.style.top = y + "px";
test.style.left = x + "px";
}
}
function up(){
dragging = false;
}
</SCRIPT>
<META content="MSHTML 6.00.2900.5848" name=GENERATOR></HEAD>
<BODY>
<DIV id=test
style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BACKGROUND: #cccccc; BORDER-LEFT: 1px solid; WIDTH: 400px; BORDER-BOTTOM: 1px solid">
<P>我是拖拽示例DIV。</P>
<P>我是拖拽示例DIV。</P>
<P>我是拖拽示例DIV。</P>
<P>我是拖拽示例DIV。</P>
<P>我是拖拽示例DIV。</P>
<P>可以试验一下效果。</P></DIV></BODY></HTML>
5959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
