`
superyang
  • 浏览: 22233 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

div拖动对象和固定浮动div

阅读更多
<!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" lang="gb2312">
<head>
<title>代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="editor" content="枫岩,http://www.cnlei.com">
<meta name="keywords" content="代码实例：拖动对象">
<meta name="description" content="最简短的拖动对象代码实例演示">
<style>
.dragAble {
position: relative;
cursor: move;
}
</style>
<script language="javascript">
<!--
// Author:  Unkonw
// Modify:  枫岩@CnLei.com
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;

function moveMouse(e) {
if (isdrag) {
oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}

function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<div class="dragAble">
ddddddd
</div>
<img
src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"
class="dragAble" />
<img
src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"
class="dragAble" />
<img
src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"
class="dragAble" />
<br />
<br />
<div
style="border: 1px solid #ff6d00; background: #ffd801; width: 240px; padding: 5px 0;"
class="dragAble">
这些都是可拖动对象
</div>

<style>
.fixed
{
right:10px;
top:100px;
width:100px;
height:500px;
background:#009999;
border:#336699 1px dashed;
+position:absolute;
+top:expression(eval(document.body.scrollTop)+100);
}
</style>
<div class=fixed></div>
<div style=height:1000px></div>
</body>
</html>


////////////---------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>无标题文档</title>
<style>
.drag {
position: absolute;
width: 150px;
border: 2px solid black;
border-top: 20px solid black;

}
</style>
<script type="text/javascript">

var obj, x, y, dx, dy;
function Setup() {
if (!document.getElementsByTagName) {
return;
}
divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className != "drag") {
continue;
}
divs[i].onmousedown = Drag;
}
}
function Drag(e) {
if (!e) {
var e = window.event;
}
obj = (e.target) ? e.target : e.srcElement;
obj.style.borderColor = "red";
dx = x - obj.offsetLeft;
dy = y - obj.offsetTop;
}
function Move(e) {
if (!e) {
var e = window.event;
}
if (e.pageX) {
x = e.pageX;
y = pageY;
} else {
if (e.clientX) {
x = e.clientX;
y = e.clientY;
} else {
return;
}
}
if (obj) {
obj.style.left = x - dx;
obj.style.top = y - dy;
}
}
function Drop() {
if (!obj) {
return;
}
obj.style.borderColor = "black";
obj = false;
}
document.onmousemove = Move;
document.onmouseup = Drop;
window.onload = Setup;


</script>

</head>
<body>

<div class="drag" id="drag1">

</div>

</body>
</html>
分享到：
| jbpm5
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics