<!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>
<title></title>
</head>
<body>
<div style="background: #99CCFF; height: 140px; width: 180px; border: 1px solid #206100"
class="dragdiv">
</div>
<div style="background: #99CCFF; height: 140px; width: 180px; border: 1px solid #206100"
class="dragdiv">
</div>
</body>
</html>
<script type="text/javascript">
var Drag={
dragged:false,
ao:null,
dragStart:function()
{
Drag.ao=event.srcElement;
Drag.dragged=true;
Drag.ao.style.position="absolute";
Drag.ao.style.filter="alpha(opacity=70)";
Drag.ao.style.cursor="move";
Drag.ao.style.border="1px dashed red";
Drag.lastX=event.clientX; //自定义属性
Drag.lastY=event.clientY;
Drag.lastLeft=Drag.ao.offsetLeft;
Drag.lastTop=Drag.ao.offsetTop;
},
draging:function(){//判断MOUSE的位置
if(!Drag.dragged||Drag.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.ao.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.ao.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
},
dragEnd:function(){
if(!Drag.dragged)
return;
Drag.dragged=false;
Drag.ao.style.border="1px solid #206100";
Drag.ao.style.filter="";
},
init:function()
{
var dragdiv=document.getElementsByTagName('div');
for(var i=0;i<dragdiv.length;i++)
{
if(dragdiv[i].className=="dragdiv")
{
dragdiv[i].attachEvent("onmousedown",Drag.dragStart);
}
}
document.onmousemove=Drag.draging;
document.onmouseup=Drag.dragEnd;
}
};
Drag.init();
</script>
拖拽其实并不是很难的东西，可是这个我也是弄了半天才弄出来的，其中的主要原因就是坐标的问题，关于offsetTop clientX ，都是比较棘手的
Drag.ao.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.ao.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
这里我理解了好长的时间，如果没有加上parseInt(Drag.lastLeft)，则当移动的时候div初始是定位在document.body的坐上角的，然后进行拖拽，div才能按正常的轨道滑行，而加上parseInt(Drag.lastLeft)了，在div移动初始的时候会把相对于document.body的坐标也加上去了， 这样就感觉到是当前位置的移动。
分享到：
相关推荐
标题“拖动div到另一个div中”描述的就是这样一个功能，即实现一个div元素能够被拖动并放置到另一个div内，同时显示被拖动div的ID。这个功能在各种应用场景中都很有用，如文件管理器、布局构建器或富文本编辑器等。 ...
在标题“拖动多个div”中，我们关注的是如何使一个或多个 `div` 元素变得可拖动，即用户可以通过鼠标进行交互，自由地在页面上移动这些元素。这种功能在构建各种交互式界面时非常有用，例如，可以用于创建可自定义...
以下是一个简单的实现示例： ```javascript let resizableDiv = document.getElementById('resizableDiv'); let startX, startY, initialWidth, initialHeight; resizableDiv.addEventListener('mousedown', ...
标题“拖动div的四个拐角改变其大小”所描述的就是这样一个功能，允许用户通过拖动div的四个角来动态调整div的宽度和高度。 实现这个功能通常会涉及到JavaScript库，例如jQuery。jQuery是一个广泛使用的JavaScript...
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
这样，用户就能通过鼠标拖动div元素在页面上自由移动。 接下来，为了实现多个div的拖拽功能，我们需要为每个可拖动的div添加单独的事件监听器，并维护一个状态对象，用于存储每个div的当前位置。这样，每次鼠标移动...
拖拽 拖动div 可拖拽div框 div+css html静态资源
标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术，涉及跨框架（iframe）通信和DOM操作。这个技术主要应用于创建富交互的用户界面，允许用户在不同的iframe之间传递和操作...
在网页开发中，创建一个可拖拽的div层是一项实用的技术，它允许用户通过鼠标操作移动界面元素，提升用户体验。这个技术主要涉及到HTML、CSS和JavaScript的交互运用，特别是JavaScript中的事件监听和DOM操作。接下来...
首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其看起来像一个独立的层。这通常包括设置边框、背景色、透明度等属性，以及通过`position: absolute`或`position: fixed`来让该...
通过这样的实现，用户可以通过直接拖动div来改变它们的顺序，而页面会实时反映出这种变化。这种方式在各种场景下都很有用，比如任务列表、菜单栏等需要用户自定义顺序的地方。 在提供的压缩包文件“拖动进行排序....
首先，我们需要创建一个可拖动的div元素。在HTML中，我们可以这样定义： ```html <div id="draggable" style="width: 100px; height: 100px; background-color: blue; position: absolute;"></div> ``` 这里我们...
本文将深入探讨如何利用jQuery库实现鼠标上下拖动div进行排序的功能，同时结合描述中的内容，我们会看到一个实例，该实例不仅支持div的拖动排序，还包含了一个左上角的按钮，用于触发其他操作。 首先，jQuery是...
div可以是任意包含待拖动数据的元素，而表格则需有一个tbody元素作为放置目标。 ```html <div class="draggable-div">待拖动的值</div> <tr><th>列标题</th></tr> ``` 4. **CSS样式**: 为了提高...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...
以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中，你可以选择使用库或框架，如jQuery UI的Resizable组件，来简化这一过程。然而，理解这些基础知识将帮助你更好地理解和定制功能，特别...
js拖动 拖拽div大小，内部随意文件操作。完美实现版
本资源涉及的是一个基于jQuery（JQ）、JavaScript（JS）和layui框架的UI组件，特别关注的是元素（尤其是div）的拖动功能。拖动插件是一种常见且实用的增强交互性的工具，它允许用户通过鼠标操作移动页面上的元素，...
在ASP.NET中实现一个可拖动的div是提高用户界面交互性和用户体验的有效方式，尤其当需要替代传统的alert对话框时，可拖动div能提供更加灵活和友好的用户体验。 首先，要实现可拖动的div，我们需要理解HTML和CSS的...
本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...