一 代码
HTML代码：
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 拖放效果 </title> </head> <body> <!-- 导入JavaScript脚本文件 --> <script src="drag.js"></script> <!-- 定义被拖放的元素 --> <div style="position:absolute; left:120px; top:150px; width:250px; border:1px solid black;"> <div style="background-color:#416ea5; width:250px; height:22px; cursor:move; font-weight:bold; border-bottom:1px solid black;" onmousedown="drag(this.parentNode, event);"> 可拖动标题 </div> <p>可被拖动的窗口</p> <p>窗口内容</p> </div> <!-- 定义一个可拖动的图片 --> <img src="image/logo.jpg" alt="按住Shift可拖动" style="position:absolute;" onmousedown="if (event.shiftKey) drag(this, event);" /> </body> </html>
JS代码：
var drag = function(target, event)
{
// 定义开始拖动时的鼠标位置（相对window座标）
var startX = event.clientX;
var startY = event.clientY;
// 定义将要被拖动元素的位置（相对于document座标）
// 因为该target的position为absolutely，
// 所以我们认为它的座标系是基于document的
var origX = target.offsetLeft;
var origY = target.offsetTop;
// 因为后面根据event的clientX、clientY来获取鼠标位置时，
// 只能获取windows座标系的位置，所以需要计算window座标系
// 和document座标系的偏移。
// 计算windows座标系和document座标系之间的偏移
var deltaX = startX - origX;
var deltaY = startY - origY;
// 鼠标松开的事件处理器
var upHandler = function(evt)
{
// 对于IE事件模型，获取事件对象
if (!evt) evt = window.event;
// 取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器
if (document.removeEventListener)
{
// DOM事件模型
// 取消在事件捕获阶段的事件处理器
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent)
{
target.detachEvent("onlosecapture", upHandler);
target.detachEvent("onmouseup", upHandler);
target.detachEvent("onmousemove", moveHandler);
target.releaseCapture( );
}
// 阻止事件传播
stopProp(evt);
}
// 阻止事件传播(该函数可以跨浏览器)
var stopProp = function(evt)
{
// DOM事件模型
if (evt.stopPropagation)
{
evt.stopPropagation( );
}
// IE事件模型
else
{
evt.cancelBubble = true;
}
}
// 为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器
if (document.addEventListener)
{
// DOM事件模型
// 在事件捕获阶段绑定事件处理器
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent)
{
// IE事件模型
// 设置该元素直接捕获该事件
target.setCapture();
// 为该元素鼠标移动时绑定事件处理器
target.attachEvent("onmousemove", moveHandler);
// 为鼠标松开时绑定事件处理器
target.attachEvent("onmouseup", upHandler);
// 将失去捕获事件当成鼠标松开处理。
target.attachEvent("onlosecapture", upHandler);
}
// 阻止事件传播
stopProp(event);
// 取消事件默认行为
if (event.preventDefault)
{
// DOM事件模型
event.preventDefault( );
}
else
{
// IE事件模型
event.returnValue = false;
}
// 鼠标移动的事件处理器
function moveHandler(evt)
{
// 对于IE事件模型，获取事件对象
if (!evt) evt = window.event;
// 将被拖动元素的位置移动到当前鼠标位置。
// 先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。
target.style.left = (evt.clientX - deltaX) + "px";
target.style.top = (evt.clientY - deltaY) + "px";
// 阻止事件传播
stopProp(evt);
}
}
二 运行结果
相关推荐
HTML拖拽功能是一种交互式设计，它允许用户通过鼠标或其他输入设备直接在页面上操作元素，如改变元素的长度。这种技术主要基于HTML5的Drag and Drop API，它为Web开发者提供了一种方便的方式来实现拖放操作，增强了...
标题“跨浏览器可8方向拖拽剪裁框”涉及到的是一个网页开发技术，它允许用户在多种浏览器上对图像进行八方向的拖动裁剪。这个功能通常用于图像编辑、预览或者上传图像时需要调整大小和裁剪的场景。在网页应用中，...
然后，通过选择一个或多个HTML元素（通常是包含待裁剪图片的`<img>`标签），调用`.Jcrop()`方法初始化插件。结合配置参数和事件处理函数，即可实现所需的图片裁剪功能。 在提供的压缩文件中，虽然没有具体的文件...
本篇文章将详细探讨"jquery 跨iframe拖拽"这一主题，该技术允许用户在不同的IFrame之间进行元素的拖放操作，这对于构建多窗口、多面板的Web应用尤其有用。 首先，我们要理解IFrame（内联框架）的概念。IFrame是一种...
2、通过绑定一个Class类名，实现拖拽这些元素，并与这些元素实现互换位置的功能； 3、拖拽一个元素与另一个元素互换位置，有二种模式，一是简单的互换位置；二是在原先的排序基础上进行更改排序； 4、支持拖拽回调...
HTML5的跨iframe拖拽功能在移动端页面设计中是一个重要的技术点，它允许用户在不同的iframe之间自由地拖放元素，提升用户体验，特别是在构建可编辑的页面设计器时。本篇文章将详细探讨如何实现这一功能，并结合给定...
jQuery简化了跨浏览器的JavaScript编程，提供了强大的选择器、动画效果和事件处理等功能，使得开发者可以快速实现拖动排序这样的复杂交互。 压缩包中的文件名“jquery-dragarrange”可能是这个插件的主文件或者包含...
HTML元素拖动排序是一种常见的交互设计，让用户能够通过鼠标直接操作页面上的元素，改变它们的顺序。这种功能在创建可自定义布局、管理列表或构建交互式应用时非常有用。在HTML中实现拖放排序主要依赖于W3C定义的`...
在这个场景下，我们关注的是一个名为"jquery.rotate.js"的jQuery插件，该插件用于实现跨浏览器的图片旋转功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互，使得开发者能够更...
在JavaScript的世界里，拖动排序（Drag and Drop Sorting）是一种常见的交互设计，它允许用户通过鼠标拖曳元素来改变它们的顺序，就像浏览器的书签栏那样。这种效果可以极大地提升用户体验，使得用户能直观地调整...
文件拖拽功能在HTML5中得到了广泛的应用，通过`<input type="file">`元素的`drag`和`drop`事件，用户可以直接从桌面或文件管理器中拖放文件到浏览器中进行上传。然而，在IE10以下的浏览器中，由于对HTML5拖放API的...
在JavaScript开发中，有时我们需要为HTML元素添加交互性，使其可以被用户拖动，以便增强用户体验。MoveElementJS是一个小型库，专门用于实现这个功能。它允许开发者轻松地赋予任何HTML元素拖拽的能力，使用户可以...
本教程将详细解释如何创建一个基本的元素拖拽功能，并演示如何将拖动的元素放入特定容器。 首先，我们需要在HTML中设置拖拽元素和目标容器。例如，我们有一个`div`元素作为可拖动的元素，另一个`div`作为接收拖动...
这种技术能够使用户通过鼠标拖动来调整网页元素的尺寸，提升用户体验，尤其是在多框架布局中，用户可以根据需要自由调整各部分的显示面积。 在HTML中，框架（Frames）是通过`<frameset>`、`<frame>`等标签实现的，...
4. **SVG支持**：除了HTML元素，还支持SVG元素的拖放，扩展了应用范围。 5. **自定义事件**：提供丰富的拖放过程中的事件回调，如`start`、`move`、`end`，允许开发者自定义拖放行为。 三、使用方法 1. **引入插件...
"仿浏览器的标签拖拽"是提高用户体验的一种技术手段，它模仿了浏览器中多标签页的拖动功能，允许用户通过鼠标拖放操作来重新排列或管理标签。这个功能常见于各种自定义浏览器、应用窗口或者网页应用中，使用户能更...
在图片拖动排序中，jQuery提供了一套方便的API，使得实现跨浏览器的拖放功能变得相对简单。通过jQuery的`.on()`方法绑定`dragstart`, `drag`, 和 `drop`等拖放相关的事件，我们可以监听并处理用户的拖放操作。 **...
本资源涉及的是一个基于jQuery（JQ）、JavaScript（JS）和layui框架的UI组件，特别关注的是元素（尤其是div）的拖动功能。拖动插件是一种常见且实用的增强交互性的工具，它允许用户通过鼠标操作移动页面上的元素，...
首先，拖放API是HTML5提供的一项功能，允许用户将元素从一处拖动到另一处，甚至可以在不同的浏览器窗口之间进行。这个特性大大增强了网页的用户体验，使得用户可以直接与页面内容进行更直观的交互。 实现拖放功能...
1. **HTML5的draggable属性**：此属性可以添加到任何HTML元素上，比如`<td>`（表格单元格）或`<tr>`（表格行），设置为`true`即可开启该元素的拖放功能。例如： ```html 拖动我 ``` 2. **拖放事件**： - `...