写道
http://blog.csdn.net/notlikegaoshou/article/details/6562636
http://zhidao.baidu.com/link?url=ePDc5C8v-kcewgZty7w_seg2kfkwU_zYxVJzoQgjYGcuo8yUPMZoIv0l4ndX2PbqRUe8I0Wur2pxb0cgULvsnLKs9bVPsBdVAp8kkwIYi2_
http://zhidao.baidu.com/link?url=ePDc5C8v-kcewgZty7w_seg2kfkwU_zYxVJzoQgjYGcuo8yUPMZoIv0l4ndX2PbqRUe8I0Wur2pxb0cgULvsnLKs9bVPsBdVAp8kkwIYi2_
写道
为了实现纯js编写的div拖拽的功能，在网上找了一些资料但是还是感觉没有说到点子上去
个人觉得div的拖拽需要三个主要的事件
1.onmousedown鼠标按下事件
2.onmousemove鼠标移动事件
3.onmouseup鼠标按键抬起事件
个人觉得div的拖拽需要三个主要的事件
1.onmousedown鼠标按下事件
2.onmousemove鼠标移动事件
3.onmouseup鼠标按键抬起事件
<!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 runat="server">
<title></title>
<script type="text/javascript">
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
function mouseDown(obj, e) {
obj.style.cursor = "move";
objX = div1.style.left;
objY = div1.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(e) {
var div = document.getElementById("div1");
var x = e.clientX;
var y = e.clientY;
if (isDowm) {
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
}
}
function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("div1");
div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
mouseX = x;
rewmouseY = y;
div1.style.cursor = "default";
isDowm = false;
}
}
</script>
</head>
<body>
<span id="span1"></span></br><span id="span2"></span></br>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;
top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)"
onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
</div>
</body>
</html>
相关推荐
JS 实现 DIV 拖拽,
在JavaScript编程中，实现DOM元素（如DIV）的拖拽和动态添加是常见的交互功能，这对于构建具有用户友好界面的Web应用至关重要。本教程将详细讲解如何使用纯JavaScript实现这一功能，无需依赖任何外部库，如jQuery或...
以上就是使用纯JavaScript实现div拖动功能的基本步骤。在实际应用中，你可能还需要考虑更多细节，如阻止默认的文本选中行为、处理触摸设备的拖动等。此外，也可以借助像jQuery UI这样的库，它们提供了封装好的拖动...
在JavaScript编程中，实现DIV元素的拖拽布局是一项常见的任务，尤其在构建可交互的Web应用或自定义桌面界面时。这项技术的核心是利用事件监听和DOM操作来模拟物理世界中的拖放行为。下面我们将详细探讨如何实现这个...
标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素，特别是`div`元素位置的技术。在这个示例中，开发者可能想要创建一个交互式的用户界面，用户可以通过鼠标拖拽来调整`div`元素的顺序...
总结来说，`js实现div拖动动画运行轨迹效果源码.zip`提供了一个学习JavaScript动态效果的实例，涵盖了DOM操作、事件监听、动画实现等多个方面，是提升前端技能的好材料。开发者可以通过阅读和理解源码，深入学习这些...
JavaScript 实现简单的 Div 拖拽功能是一种常见的交互设计，常用于网页上的可操作元素，如窗口、面板或自定义控件。以下是对这个实例的详细解析： 首先，我们需要一个包含拖拽功能的 Div 元素。在 HTML 中，我们...
在实际应用中，div拖动插件通常包括以下功能： 1. **初始化**：设置可拖动的div元素，添加必要样式和事件监听器。 2. **开始拖动**：当用户按下鼠标并在div上移动时，记录初始位置和鼠标位置。 3. **拖动中**：持续...
在.NET环境中，我们可以结合JavaScript（JS）来实现HTML元素，如div的拖拽功能。这是一种增强用户交互体验的常见技术，让用户可以通过鼠标操作在页面上移动特定的元素。下面我们将详细探讨如何实现这一功能。 首先...
js拖动 拖拽div大小，内部随意文件操作。完美实现版
javaScript实现DIV简单拖拽
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
- 为要实现拖拽功能的div元素添加一个唯一的ID，便于JavaScript选择器选取。 - 在CSS中设置div的样式，如宽度、高度、边框等，使其可见且可选中。 2. **事件监听**： - 使用JavaScript，为div元素添加`mousedown...
本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”，这是一项实用技术，尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先，让我们了解...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...
用js＋css轻松实现网页的浮动拖动窗口。
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
利用JS实现可拖动的DIV效果，在原有基础上增加的限制在一定区域内的效果。方便，易用。可以很方便地移动到您的工程里面