`
cakin24
  • 浏览: 1388040 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

跨浏览器拖动HTML元素

阅读更多

一 代码

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);
	}
}
 
二 运行结果


 
  • 大小: 22.9 KB
分享到:
评论

相关推荐

    HTML拖拽改变元素长度

    HTML拖拽功能是一种交互式设计,它允许用户通过鼠标或其他输入设备直接在页面上操作元素,如改变元素的长度。这种技术主要基于HTML5的Drag and Drop API,它为Web开发者提供了一种方便的方式来实现拖放操作,增强了...

    跨浏览器可8方向拖拽剪裁框

    标题“跨浏览器可8方向拖拽剪裁框”涉及到的是一个网页开发技术,它允许用户在多种浏览器上对图像进行八方向的拖动裁剪。这个功能通常用于图像编辑、预览或者上传图像时需要调整大小和裁剪的场景。在网页应用中,...

    跨浏览器的jquery图片剪裁插件Jcrop

    然后,通过选择一个或多个HTML元素(通常是包含待裁剪图片的`&lt;img&gt;`标签),调用`.Jcrop()`方法初始化插件。结合配置参数和事件处理函数,即可实现所需的图片裁剪功能。 在提供的压缩文件中,虽然没有具体的文件...

    jquery 跨iframe拖拽

    本篇文章将详细探讨"jquery 跨iframe拖拽"这一主题,该技术允许用户在不同的IFrame之间进行元素的拖放操作,这对于构建多窗口、多面板的Web应用尤其有用。 首先,我们要理解IFrame(内联框架)的概念。IFrame是一种...

    一个拖拽网页元素实现移位和互换位置的JS插件;

    2、通过绑定一个Class类名,实现拖拽这些元素,并与这些元素实现互换位置的功能; 3、拖拽一个元素与另一个元素互换位置,有二种模式,一是简单的互换位置;二是在原先的排序基础上进行更改排序; 4、支持拖拽回调...

    html5 跨iframe的拖拽实现移动端页面设计器

    HTML5的跨iframe拖拽功能在移动端页面设计中是一个重要的技术点,它允许用户在不同的iframe之间自由地拖放元素,提升用户体验,特别是在构建可编辑的页面设计器时。本篇文章将详细探讨如何实现这一功能,并结合给定...

    拖动排序元素jquery插件

    jQuery简化了跨浏览器的JavaScript编程,提供了强大的选择器、动画效果和事件处理等功能,使得开发者可以快速实现拖动排序这样的复杂交互。 压缩包中的文件名“jquery-dragarrange”可能是这个插件的主文件或者包含...

    Html元素拖动排序

    HTML元素拖动排序是一种常见的交互设计,让用户能够通过鼠标直接操作页面上的元素,改变它们的顺序。这种功能在创建可自定义布局、管理列表或构建交互式应用时非常有用。在HTML中实现拖放排序主要依赖于W3C定义的`...

    跨浏览器控制图片旋转jquery插件jquery.rotate.js.zip

    在这个场景下,我们关注的是一个名为"jquery.rotate.js"的jQuery插件,该插件用于实现跨浏览器的图片旋转功能。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互,使得开发者能够更...

    类似浏览器首页拖动排序的js效果

    在JavaScript的世界里,拖动排序(Drag and Drop Sorting)是一种常见的交互设计,它允许用户通过鼠标拖曳元素来改变它们的顺序,就像浏览器的书签栏那样。这种效果可以极大地提升用户体验,使得用户能直观地调整...

    文件拖拽到浏览器(activex与js交互)

    文件拖拽功能在HTML5中得到了广泛的应用,通过`&lt;input type="file"&gt;`元素的`drag`和`drop`事件,用户可以直接从桌面或文件管理器中拖放文件到浏览器中进行上传。然而,在IE10以下的浏览器中,由于对HTML5拖放API的...

    MoveElementJS给指定HTML元素添加移动拖拽功能

    在JavaScript开发中,有时我们需要为HTML元素添加交互性,使其可以被用户拖动,以便增强用户体验。MoveElementJS是一个小型库,专门用于实现这个功能。它允许开发者轻松地赋予任何HTML元素拖拽的能力,使用户可以...

    js 元素拖拽效果

    本教程将详细解释如何创建一个基本的元素拖拽功能,并演示如何将拖动的元素放入特定容器。 首先,我们需要在HTML中设置拖拽元素和目标容器。例如,我们有一个`div`元素作为可拖动的元素,另一个`div`作为接收拖动...

    HTML中可拖动改变框架大小的页面范例

    这种技术能够使用户通过鼠标拖动来调整网页元素的尺寸,提升用户体验,尤其是在多框架布局中,用户可以根据需要自由调整各部分的显示面积。 在HTML中,框架(Frames)是通过`&lt;frameset&gt;`、`&lt;frame&gt;`等标签实现的,...

    高性能HTML和SVG元素拖拽js插件plain-draggable

    4. **SVG支持**:除了HTML元素,还支持SVG元素的拖放,扩展了应用范围。 5. **自定义事件**:提供丰富的拖放过程中的事件回调,如`start`、`move`、`end`,允许开发者自定义拖放行为。 三、使用方法 1. **引入插件...

    仿浏览器的标签拖拽,js拖拽

    "仿浏览器的标签拖拽"是提高用户体验的一种技术手段,它模仿了浏览器中多标签页的拖动功能,允许用户通过鼠标拖放操作来重新排列或管理标签。这个功能常见于各种自定义浏览器、应用窗口或者网页应用中,使用户能更...

    JQuery图片拖动排序兼容各种浏览器

    在图片拖动排序中,jQuery提供了一套方便的API,使得实现跨浏览器的拖放功能变得相对简单。通过jQuery的`.on()`方法绑定`dragstart`, `drag`, 和 `drop`等拖放相关的事件,我们可以监听并处理用户的拖放操作。 **...

    JQ JS javascript layui UI组件 元素 div 拖动插件

    本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...

    HTML5实现拖拽互动改变元素颜色特效.zip

    首先,拖放API是HTML5提供的一项功能,允许用户将元素从一处拖动到另一处,甚至可以在不同的浏览器窗口之间进行。这个特性大大增强了网页的用户体验,使得用户可以直接与页面内容进行更直观的交互。 实现拖放功能...

    drag表格内元素拖拽

    1. **HTML5的draggable属性**:此属性可以添加到任何HTML元素上,比如`&lt;td&gt;`(表格单元格)或`&lt;tr&gt;`(表格行),设置为`true`即可开启该元素的拖放功能。例如: ```html 拖动我 ``` 2. **拖放事件**: - `...

Global site tag (gtag.js) - Google Analytics