一 代码
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. **拖放事件**: - `...