<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0px; padding:0px;}
body{position:relative; width:780px; height:800px; border:1px solid red}
.drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff}
.drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;}
.center{ margin:200px; border:3px solid red}
</style>
<script type="text/javascript"></script>
<title>popper.w' drag class</title>
</head>
<body>
<div class="drag" >
<h1><strong>popper.w'dragClass</strong></h1>
</div>
<div class="drag" >
<h1>www.51js.com</h1>
</div>
<div class="drag" >
<h1><strong>www.blueidea.com</strong></h1>
</div>
<div class="drag"><h1>测试二</h1></div>
<div class="drag"><h1>测试三</h1></div>
<div class="drag"><h1>测试四</h1></div>
<div class="drag"><h1>测试五</h1></div>
</body>
</html>
<script type="text/javascript">
/*
Author : popper.w
Update : 2008-4-23
Version : v2.0
*/
var DragZindexNumber=0;
function drag(obj){
var ox,oy,ex,xy,tag=0,mask=0;
if(tag==0){
obj.onmousedown=function(e)
{
if(mask==1){return; }
obj.style.zIndex=DragZindexNumber++;
transp(obj,"start")
tag=1;
var e = e||window.event;
ex=getEventOffset(e).offsetX;
ey=getEventOffset(e).offsetY;
ox=parseInt(obj.offsetLeft);
oy=parseInt(obj.offsetTop);
tempDiv=document.createElement("div");
with(tempDiv.style)
{
width=obj.offsetWidth+"px";
height=obj.offsetHeight+"px";
border="1px dotted red";
position="absolute";
left=obj.offsetLeft+"px";
top=obj.offsetTop+"px";
zIndex=999;
}
document.body.appendChild(tempDiv);
this.ele=tempDiv;
fDragStart(tempDiv);
document.body.onmousemove=function(e){
if(tag==1)
{
var e=e||window.event;
tempDiv.style.left=parseInt(e.clientX)-ex+"px";
tempDiv.style.top=parseInt(e.clientY)-ey+"px";
}
else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)}
}
tempDiv.onmouseup=function(e)
{
var e=e||window.event;
fDragEnd(tempDiv);
obj.style.position="absolute";
movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20);
tempDiv.parentNode.removeChild(tempDiv);
tag=0;
}
}
}
}
function movie(o,l,t){
var a=1;
mask=1;
var ol=parseInt(o.offsetLeft);
var ot=parseInt(o.offsetTop);
var iTimer=setInterval(function(){
if(a==10)
{
transp(o,"end");
mask=0;
clearInterval(iTimer);
}
o.style.left=ol+a*(l-ol)/10+"px";
o.style.top=ot+a*(t-ot)/10+"px";
a++;
},20);
}
function fCancleBubble(e)
{
var e = window.event || e;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
function transp(o,mode){
if(mode=="start"){
if(document.all){
o.style.filter = "Alpha(Opacity=50)";
}else{
o.style.opacity = 0.5;
}
}
else {
if(document.all){
o.style.filter = "Alpha(Opacity=100)";
}else{
o.style.opacity = 1;
}
}
}
function getOffset(evt)
{
var target = evt.target;
if (target.offsetLeft == undefined)
{
target = target.parentNode;
}
var pageCoord = getPageCoord(target);
var eventCoord =
{
x: window.pageXOffset + evt.clientX,
y: window.pageYOffset + evt.clientY
};
var offset =
{
offsetX: eventCoord.x - pageCoord.x,
offsetY: eventCoord.y - pageCoord.y
};
return offset;
}
function getPageCoord(element)
{
var coord = {x: 0, y: 0};
while (element)
{
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return coord;
}
function getEventOffset(evt)
{
var msg = "";
if (evt.offsetX == undefined)
{
var evtOffsets = getOffset(evt);
msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};
}
else
{
msg={offsetX:evt.offsetX,offsetY:evt.offsetY};
}
return msg;
}
function fDragStart(XEle)
{
switch(fCkBrs())
{
case 3:
window.getSelection().removeAllRanges();
break;
default:
XEle.setCapture();
break;
}
}
function fDragEnd(XEle)
{
switch(fCkBrs())
{
case 3:
window.getSelection().removeAllRanges();
break;
default:
XEle.releaseCapture();
break;
}
}
function fCkBrs()
{
switch (navigator.appName)
{
case 'Opera': return 2;
case 'Netscape': return 3;
default: return 1;
}
}
var element=document.getElementsByTagName("div");
for(var i=0;i<element.length;i++){
if(element.className=="drag"){
drag(element)}
}
</script>
分享到：
相关推荐
1. **多层支持**：这意味着在同一个页面上，你可以创建多个层次的拖放区域，每个区域都有独立的拖放规则，用户可以在这些区域之间自由拖动元素，提供更加灵活的交互体验。 2. **多区域划分**：在网页的各个部分设置...
"jQuery鼠标上下层拖动排序代码.zip"就是一个实例，它提供了一个利用jQuery实现的div容器中li元素的拖动排序功能，适用于创建可自定义排序的列表或布局。这个功能尤其对那些需要用户自由调整内容顺序的Web应用非常...
还需定义一个拖动样式，使弹出层具有可拖动的特性。 ```css .hidden { display: none; } .draggableLayer { position: absolute; /* 设置绝对定位 */ width: 400px; height: 200px; background-color: #fff; ...
根据提供的文件信息，我们可以分析并总结出与“可以拖动的层”的代码相关的知识点。这段代码涉及到了HTML、CSS以及JavaScript的基本用法，主要用于实现网页上元素的拖拽功能。下面将详细介绍这些知识点： ### 1. ...
在这个案例中，JavaScript代码负责监听用户的鼠标事件，当用户拖动层时，更新层的位置信息。 接着，保存拖动后的信息是这个应用的核心部分。在这里，开发者选择将这些信息存储在XML文件中。XML（Extensible Markup ...
"用JS实现层拖动的实例代码" 是一种技术，它允许用户通过鼠标操作在页面上移动元素，这种效果常用于创建可自定义布局的对话框、菜单或者图像。在本实例中，我们不仅将学习如何实现层（通常指的是HTML中的div元素）的...
本资源“jQuery点击弹出层可拖动代码.zip”提供了一个功能，即利用jQuery实现一个弹出层（也称为对话框或模态窗口），并且这个弹出层可以被用户通过鼠标点击拖动来改变其在页面上的位置。 首先，我们要理解jQuery弹...
在IT行业中，jQuery是一个非常流行的JavaScript库，它简化了...总之，这个精简版的jQuery拖动代码示例为开发者提供了一个快速实现简单拖动效果的起点，对于初学者理解如何使用jQuery增强网页交互性具有很好的参考价值。
**jQuery拖动任意层** jQuery库为Web开发者提供了一种高效、简洁的方式来操作DOM（文档对象模型），并处理用户交互。在本示例中，我们将深入探讨如何利用jQuery实现网页上的层（通常指的是div元素）的拖动功能。这...
《jQuery点击按钮弹出层可拖动代码》 在网页开发中，用户交互性是提升用户体验的关键因素之一。jQuery库以其简洁的API和强大的功能，成为实现这些交互效果的首选工具。本压缩包中的资源，"jQuery点击按钮弹出层可...
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中，我们将探讨如何利用JavaScript来创建一个可拖动的弹出层，并控制其显示与隐藏。 首先，让我们理解`div`层的隐藏与显示。在HTML中，我们创建一个`div`元素并为其...
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
js 拖动层 选中棋子并拖动js 拖动层 代码少易懂
它采用面向对象编程（Object-Oriented Programming, OOP）的设计理念，使得代码结构清晰，易于理解和使用。 ### 1. JavaScript基础 JavaScript是一种轻量级的、解释型的编程语言，主要用于Web前端开发，为网页添加...
在“mootools层拖动实现”这个主题中，我们将深入探讨如何利用Mootools库实现可拖动的div层。这对于创建交互式网页元素，如对话框、窗口或者自定义导航菜单等，是非常有用的。 Mootools的核心概念之一是其对DOM...
开发者可以下载这个DEMO，通过查看和修改源代码，了解并学习弹出层拖动的实现细节。 此外，为了提升用户体验，还可以添加一些优化，比如限制弹出层在页面内的移动范围，防止被拖出视口，或者在拖动过程中禁用背景的...
在JavaScript编程中，创建一个可拖动的弹出层是一项常见的需求，特别是在开发网页交互功能时。"js弹出层可拖动兼容各大浏览器"这个主题涵盖了如何利用JavaScript实现一个弹出窗口，并确保它在各种浏览器（如Chrome、...
具体到压缩包中的文件名，我们可以看到涉及了层的关闭与打开、js拖放原理及代码、可拖动的网站地图和DIV拖动的许愿墙示例。这些都是JavaScript层特效和拖放功能的实际应用案例，通过分析和学习这些代码，你可以更好...
根据提供的文件信息，本文将详细解析“div拖动”这一技术相关的知识点，包括其实现原理、应用场景以及具体的代码实现方式。 ### 一、基础知识：理解div拖动 #### 1.1 div元素简介 在HTML中，`div`是块级元素中最...