`
yangsp1
  • 浏览: 48829 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript 拖放效果系列一

    博客分类:
  • js
阅读更多
原文来自:http://www.cainiao8.com/web/js_examples/13_tuozhuai.html

为什么要实现这个拖拽效果?

菜鸟一直比较好奇JavaScript的拖拽是怎么实现的,刚刚进入大四,闲时间又多了,突然想起一探JS拖拽的究竟。百度搜索到了蓝色的一篇文章“怎么用javascript进行拖拽”,英文原文为“How to Drag and Drop in JavaScript”。文章比我想象的复杂,仅仅是获得鼠标事件的x、y的绝对位置就写了一页(我的想法是拖拽根本就不需要得到准确的鼠标绝对位置),还要考虑浏览器之间的兼容性。最郁闷的是测试了一下,第一个显示鼠标位置的例子在IE下和FF下就不一致了。

索性决定按照自己的思路来实现拖拽效果。很幸运,试验成功了,也就有了下面的代码。
实现拖拽的基本思路

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left 的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

根据以上的基本原理,我写出了下面的基本思路。感觉代码还是比较短的,

拖拽状态 = 0
鼠标在元素上按下的时候{
	拖拽状态 = 1
	记录下鼠标的x和y坐标
	记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
	如果拖拽状态是0就什么也不做。
	如果拖拽状态是1,那么
	元素y = 现在鼠标y - 原来鼠标y + 原来元素y
	元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
	拖拽状态 = 0
}


 

将以上思路翻译成JS代码就可以实现拖拽的效果了。
JavaScript代码

<script type="text/javascript">
var dragging = false;
var test;
var mouseY;
var mouseX;
window.onload = function(){
	test = document.getElementById("test");
	test.onmousedown = down;
	test.onmousemove = move;
	document.onmouseup = up;
	test.style.position = "relative";
	test.style.top = "0px";
	test.style.left = "0px";
}
function down(event)
{
	event = event || window.event; 
	dragging = true; 
	mouseX = parseInt(event.clientX);
	mouseY = parseInt(event.clientY);
	objY = parseInt(test.style.top);
	objX = parseInt(test.style.left);
}
function move(event){
	event = event || window.event; 
	if(dragging == true){
		var x,y;
		y = event.clientY - mouseY + objY;
		x = event.clientX - mouseX + objX;
		test.style.top = y + "px";
		test.style.left = x + "px";
	}
}
function up(){
	dragging = false;
}
</script>


HTML代码
<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">
  <p>我是拖拽示例DIV。</p>
  <p>可以试验一下效果。</p>
</div> 


JS拖拽的实际效果

点击进入示例网页
缺点与待完善之处

这个拖拽的例子还相当不完善,不过已经实现了拖拽最根本的核心。想到的待完善部分有下面几点:获得元素的x与y坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决,前面三个比较好办。
JavaScript拖拽系列

   1. JavaScript拖拽
   2. JavaScript拖拽2——多元素、分离JS
   3. JavaScript拖拽3——解决快速拖拽的问题
   4. JavaScript拖拽4——获得元素的位置
   5. JavaScript拖拽5——性能优化
   6. JavaScript拖拽6——修复错误
分享到:
评论

相关推荐

    javascript 拖放效果实现代码

    举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案。或者也许你想在网站上拥有一个可以被...

    javascript 拖放实现的要点

    总结,JavaScript拖放实现涉及HTML5的Drag and Drop API,通过一系列事件监听和处理,可以创建出丰富的用户交互体验。开发者需要理解每个事件的作用,并注意兼容性和用户体验,确保功能在各种环境下的正常运行。通过...

    两款JAVASCRIPT拖拽(拖放)

    这两款JavaScript拖放实现提供了不同的方法来处理这种交互,有助于提高网站或应用的用户体验。在本文中,我们将探讨拖放的基本原理以及如何使用JavaScript实现这一功能。 首先,拖放功能的核心在于浏览器提供的`...

    HTML5中实现拖放效果无须借助javascript.docx

    ### HTML5中实现拖放效果无需借助JavaScript 在现代Web开发中,拖放(Drag and Drop)功能是一种常见的交互方式,它可以显著提升用户体验。传统上,实现这一功能往往需要使用JavaScript来处理各种拖放事件。然而,...

    最新Sortable – 简单灵活的 JavaScript 拖放排序插件

    总之,Sortable是一个高效、灵活的JavaScript拖放排序插件,它简化了在网页中实现动态排序的复杂性,同时提供了丰富的定制选项,以满足不同项目的具体需求。无论你是前端新手还是经验丰富的开发者,Sortable都能帮助...

    javascript经典效果

    8. **jQuery库**:jQuery简化了JavaScript的DOM操作和事件处理,提供了一系列方便的API,如`$(selector).fadeIn()`、`$(selector).slideUp()`等,实现常见动画效果。 9. **表单验证**:JavaScript可以在客户端进行...

    javascript经典效果示例

    在这个“javascript经典效果示例”压缩包中,我们很可能会找到一系列用于创建动态、引人入胜用户体验的代码片段。下面将详细讨论JavaScript在网页效果中的常见应用及其相关知识点。 1. **页面加载动画**:...

    JavaScript_基于Sortablejs的Vue拖放组件.zip

    通过简单的API调用,如`new Sortable(element, options)`,你就能设置拖放行为,其中`element`是你想使其可拖放的DOM元素,而`options`则是一系列可选配置,如排序方式、动画效果等。 接下来,我们转向Vue.js,这是...

    javascript犀利的效果100个

    1. **动画效果**:JavaScript可以轻松创建平滑的动画,如淡入淡出、滑动效果、旋转、缩放等,通过修改元素的CSS属性,结合requestAnimationFrame或setTimeout实现。 2. **事件处理**:JavaScript提供了一系列事件...

    JavaScript 经典效果集

    这个"JavaScript经典效果集"很可能包含了一系列实用且有趣的JavaScript代码示例,旨在帮助开发者和设计师实现各种常见或创新的网页特效。 这些效果可能涵盖以下几个方面: 1. **导航菜单**:JavaScript可以创建...

    11个震撼的javascript网页效果JavaScript图片特效.zip

    在这个"11个震撼的javascript网页效果JavaScript图片特效.zip"压缩包中,包含了一系列利用JavaScript实现的令人惊叹的图片特效,这些都是设计师和开发者们可以参考并应用到自己项目中的宝贵资源。 1. **图片滑动...

    支持移动触摸设备的纯js元素拖放插件

    这个API包括了`dragstart`, `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`和`drop`等一系列事件,开发者可以通过监听这些事件来实现元素的拖放行为。然而,原生的拖放API在触摸设备上的支持并不完善,...

    jQuery UI拖拽拖放插件jquery.top-droppable

    jQuery UI是一个强大的JavaScript库,提供了丰富的用户界面组件,其中包括拖放功能。`jquery.top-droppable` 是一个基于jQuery UI的扩展插件,它增强了拖放操作,特别是对于多层堆叠容器的处理。 **一、jQuery UI...

    页面 JS 拖拽效果。。。

    JS拖拽是指通过JavaScript实现的页面元素拖放效果,它可以允许用户通过鼠标操作页面上的元素,将其从一处拖动到另一处。在.NET环境下,虽然主要涉及后台编程,但可以通过与前端JS的配合实现拖拽功能。 JavaScript中...

    Drag-and-Drop-Card:只是为了学习。 教程“使用HTML CSS和JavaScript拖放卡| SortableJS”版权所有Bedimcode(https

    在这个教程“使用HTML CSS和JavaScript拖放卡| SortableJS”中,我们将深入探讨如何创建一个功能完善的拖放卡片系统,这是一个在Web开发中常见且实用的功能,常用于组织信息、构建交互式界面等场景。这个教程由...

    Javascript拖拽拖放系列文章3之细说事件对象第1/4页

    在拖拽拖放系列文章的后续部分,很可能会进一步讨论如何利用这些事件对象的属性和方法来实现复杂的拖放功能,例如计算元素相对于父元素的位置(如`offsetLeft`和`offsetTop`),或者处理多浏览器的兼容性问题。...

    花了好长时间积累的javascript效果1

    在"花了好长时间积累的javascript效果1"这个压缩包中,包含了一系列实用且全面的JavaScript小应用代码,总计约有150个,涵盖了各种常见的特效和功能。 1. **DOM操作**:JavaScript的核心能力之一就是对文档对象模型...

Global site tag (gtag.js) - Google Analytics