<!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>
分享到：
相关推荐
3. **拖动功能**：实现div拖动通常需要在`mousedown`事件中记录鼠标的初始位置，然后在`mousemove`事件中计算鼠标移动的距离，并更新div的位置。`mouseup`事件则用于结束拖动。示例代码可能会包含如下片段： ```...
本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先，让我们理解“浮动DIV”。在HTML中，浮动（float）属性常用于布局，使元素可以向左或向右移动，以便其他内容可以环绕它。在CSS...
可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能通常采用原生 JavaScript 实现。 #### 实现步骤 1. **绑定事件监听器**：为 Div 绑定 `mousedown` 事件，当用户按下鼠标左键时触发。 2. **获取...
在JavaScript编程中，实现`div`浮动层的拖拽效果是一项常见的需求，特别是在网页交互设计中。这个场景通常涉及到事件监听、元素定位以及鼠标坐标计算等技术。下面将详细讲解如何利用JavaScript实现这一功能。 首先...
这个“原生js div网页右下角浮动提示层可缩小和关闭浮动提示层”的项目，显然旨在解决这一问题。以下是关于这个主题的详细知识点： 1. **原生JavaScript**：原生JavaScript指的是不依赖任何库或框架，如jQuery或Vue...
本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div，并将其应用于布局排列，以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展，它提供了...
原生JavaScript（不依赖于任何库如jQuery）制作的浮动div层拖动叠加效果，是一种增强用户体验的技术，使得用户可以通过鼠标拖动来改变div层的位置，实现动态交互。本篇文章将详细介绍如何利用JavaScript实现这一功能...
在网页开发中，实现元素的拖动功能是一项常见的交互设计，尤其在构建用户界面时，如div和iframe的拖动可以提升用户体验。本教程将详细讲解如何为div和iframe元素添加拖动功能。 首先，我们需要了解HTML中的div和...
在JavaScript（JS）中，实现一个可任意拖拽的弹出div是一项常见的需求，尤其在构建交互式Web应用时。这个功能可以增加用户界面的动态性和用户体验。下面将详细介绍如何利用JavaScript来实现这一功能。 首先，我们...
### 页面中浮动的DIV(可拖移)：深入解析与实现方法 在Web开发中，创建可拖动的元素是一项非常实用且常见的功能。本文将详细介绍如何通过HTML、CSS及JavaScript来实现页面中的一个可拖动的`<div>`元素，并深入探讨其...
"可拖动div层"是这样的一个功能，它允许开发者创建一个浮动且可操作的div元素，通常用于弹出式窗口、对话框或者提示信息。这个功能在jQuery库的支持下，可以实现跨浏览器的兼容性，包括Internet Explorer（IE）、...
在这个“js div浮动层拖拽效果代码.zip”中，包含的是一段实现HTML `<div>` 元素可拖动功能的JS代码。这个功能常见于创建浮动窗口、对话框或者自定义控件，使用户可以通过鼠标操作移动这些元素在页面上的位置。 ...
1.动态生成浮动窗口 2.可自由拖动 3.可进行折叠和恢复 4.可自由进行关闭 5.可自由定义标题栏背景 6.可设置为目标窗口的内容 7.可自由定义弹出位置和大小 优点: 1.代码精简,加载速度快 2.支持URL和普通文本...
"jquery div页面图片浮动层鼠标拖动效果代码.zip"是一个示例项目，用于展示如何利用jQuery实现一个图片浮动层，并且允许用户通过鼠标拖动来移动这个浮动层。在这个压缩包中，我们有两个文件：`使用须知.txt`和`...
在网页设计中，浮动层（div）拖拽效果是一种常见的交互设计，用于创建可移动的元素，例如对话框、窗口或者任何需要用户手动调整位置的界面元素...详细阅读这些文件将有助于你更好地理解和实现js div浮动层的拖拽效果。
本知识点主要关注如何使用jQuery实现一个可拖拽的弹出DIV组件，该组件适用于创建可交互的对话框或者浮动窗口。描述中提到，这个组件是组件化的，意味着它可以方便地被复用和定制，而图片需要自行替换，这意味着组件...
总之，实现 `DIV` 分栏宽度可拖动变化的JS代码是一项增强网页互动性和用户体验的任务。通过理解事件处理、CSS布局和JavaScript的基本原理，我们可以创建出动态且响应式的页面元素。这个功能在数据展示、比较视图等...
在网页设计和开发中，"DIV层拖动、关闭、打开"是一个常见的功能，它涉及到用户界面的交互性和用户体验。这个功能通常应用于弹出框、模态窗口或者对话框等元素，使得用户能够通过拖动调整层的位置，通过关闭和打开...