以前看到很多页面中都有一个浮动窗口可以用鼠标拖过来拖过去，今天到网上搜了下，找了个比较简单的试了试，终于弄懂了到底是怎么回事，以后用到的时候就可以拷贝扩展了，再试试弄出JE论坛中的那种效果。
做一下记录，以后不用到处找了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dragTest</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var isDrag=0;//是否可拖动标志，可拖动为1，不可拖动为2
var divAndMouseX;//鼠标落点距离div左上角x坐标的差距
var divAndMouseY;//鼠标落点距离div左上角y坐标的差距
var divMove;
//鼠标按下时
function down(div){//鼠标按下
isDrag=1;//将div设置为可拖动
divMove=div;//用于下边拖动时的定位(新的位置的坐标)
//首先计算鼠标与拖动对象左上角的坐标差，然后在下边拖动方法中，用鼠标的坐标减坐标差就是新位置的坐标了
divAndMouseX=event.clientX-parseInt(div.style.left);
divAndMouseY=event.clientY-parseInt(div.style.top);
}
function move(){//拖动过程计算div坐标
if(isDrag==1){
divMove.style.left=event.clientX-divAndMouseX;
divMove.style.top=event.clientY-divAndMouseY;
}
}
function up(){//放开鼠标将div设置为不可拖动
isDrag=0;
}
</script>
</head>
<body>
<div id="divtest" onmousedown="down(this)" onmousemove="move()"
onmouseup="up()"
style="cursor: move; border: 1px dashed blue; background-color: lightblue; width: 50px; height: 50px; position: absolute; left: 100px; top: 50px;">
<table width="100%" height="100%">
<tr>
<td>
test
</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
5. **样式设置**：在CSS文件（styles.css）中，我们可以为div和拖动状态添加样式，以提升用户体验。 ```css .draggable { width: 100px; height: 100px; border: 1px solid #ccc; position: absolute; cursor:...
**PHP + MySQL + JS 拖拽Div实例详解** 在Web开发中，用户交互性是提升用户体验的关键因素之一。拖拽功能（Drag and Drop）可以让用户通过鼠标直接操作页面元素，增强了网页的互动性。本实例将介绍如何使用PHP、...
通过这些事件，我们可以实现div的拖动功能： 1. 在mousedown事件中，记录初始鼠标位置和div的当前位置。 2. 在mousemove事件中，计算鼠标当前位置与初始位置的差值，并更新div的位置。 3. 在mouseup事件中，停止...
在“net Div”的场景下，标签“随便拖拽div”可能意味着我们需要实现一种响应式或者可拖拽的布局。响应式布局允许网页根据屏幕尺寸自动调整，而可拖拽功能则让用户能够直接操作 `div` 的位置。 对于响应式布局，...
可拖动的div页面，可以做网站主页等页面
通过这个例子，开发者可以学习到如何实现JavaScript拖拽功能，以及如何与不同的数据存储机制集成，从而在实际项目中灵活应用。 总的来说，这个主题涵盖了JavaScript事件处理、DOM操作、数据序列化、Ajax通信以及...
总的来说，通过jQuery的拖拽插件，我们可以轻松实现div元素的自由拖动排序，极大地提高了用户界面的交互性和用户体验。这种技术广泛应用于网页应用的构建，尤其是在需要用户自定义顺序或布局的场景下。
在这个例子中，当用户点击“添加新div”按钮时，会在id为"container"的div内创建一个新的div，并通过`draggable()`使其可拖动。 **自定义div大小** 在HTML中，我们可以直接设置div的宽度和高度。例如： ```html ...
在本案例中，开发者利用Ext JS库的强大力量，为<div>元素赋予了拖动的能力，让用户可以通过鼠标操作来改变元素的位置。 Ext JS是一个完整的JavaScript UI框架，提供了丰富的组件和强大的数据绑定机制，适用于构建...
而"工具"标签可能意味着这个可拖动的div可以作为一个实用的小工具，比如对话框、提示框或者自定义的交互元素。 在提供的压缩包文件列表中，"sasd.html"可能是实现这一功能的一个实例文件。它可能包含了上述代码的...
在网页开发中，动态交互效果往往能...本篇文章将深入讲解如何利用JQuery实现DIV元素的拖拽功能。 首先，确保在项目中引入了JQuery库。你可以通过CDN链接或者本地引入的方式添加JQuery到HTML文件中。例如： ```html ...
在这个例子中，我们添加了拖动和调整大小的功能。通过监听`mousedown`事件，我们记录了鼠标按下时的位置。在`mousemove`事件中，我们计算了鼠标移动的距离，并据此更新div的位置。对于调整大小，我们添加了一个角点...
在网页开发中，实现元素的拖动功能是一项常见的交互设计，尤其在构建用户界面时，如div和iframe的拖动可以提升用户体验。本教程将详细讲解如何为div和iframe元素添加拖动功能。 首先，我们需要了解HTML中的div和...
在`css`文件中，我们可以定义div的样式，如尺寸、背景色、边框等，以及拖动时的样式变化。例如： ```css .draggable { width: 100px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; ...
在这个例子中，我们设置了一个id为"draggable"的div，并为其设置了可拖动属性`draggable="true"`，同时通过CSS赋予它一定的样式，使其易于识别。 接下来，我们需要编写JavaScript代码（这里以drag.js为例）来处理...
在这个例子中，`#draggable`的div就可以被拖动了。 **总结** 以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和...
在这个例子中，我们设置了`div`的ID为"draggableDiv"，并将其样式设置为绝对定位，这样可以使其脱离文档流，方便后续的拖动操作。同时，我们设定了一些基本的宽高和背景色。 接着，我们需要使用CSS来调整`div`的...
在"jquery巧妙使用div例子"中，jQuery被用来处理div元素的行为，如监听用户的交互，改变div的状态，并执行相应的动画效果。 其次，jFrame是一个基于jQuery的插件，它提供了创建窗口式界面的能力。jFrame模仿了桌面...
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
在这个例子中，`#draggableDiv`就是我们可以拖动的div元素。`tdrag`类名是`Tdrag.js`插件识别可拖动元素的关键，而`$.fn.tdrag()`则是初始化该功能的命令。 Tdrag.js 插件提供了几个可配置的选项，以满足不同的需求...