`
leeleo
  • 浏览: 323338 次
  • 性别: Icon_minigender_1
  • 来自: 贵阳
社区版块
存档分类
最新评论

javascript 多个层拖动效果

阅读更多
<style>
<!--
div {
background: #cccccc;
position: absolute;
width: 50;
height: 50;
}
-->
</style>
<div onmousedown="oMove(this)"></div>
<div onmousedown="oMove(this)"></div>
<div onmousedown="oMove(this)"></div>
<script>
function oMove(odiv)
{
var otop,oleft;
otop=event.y-odiv.offsetTop;
oleft=event.x-odiv.offsetLeft;
odiv.setCapture();
odiv.onmousemove=function()
{
  odiv.style.left=event.x-oleft;
  odiv.style.top=event.y-otop;
}
odiv.onmouseup=function()
{
  odiv.onmousemove=null;
  odiv.releaseCapture();
}
}
</script> 

 

分享到:
评论

相关推荐

    javascript 实现的层拖动简单实例

    在网页开发中,实现元素的拖动功能可以...通过深入研究和扩展,可以实现更复杂的拖放功能,如限制元素拖动范围、添加吸附效果或者支持多个可拖动元素等。对于前端开发者来说,掌握这样的技术对于提升用户体验至关重要。

    JavaScript+CSS层拖动类示例

    "JavaScript+CSS层拖动类示例"提供了一个实用的解决方案,它允许用户通过鼠标轻松地移动页面上的元素,例如窗口、图片或者文本框。这个实例包含三个不同的例子,分别演示了图片窗口、纯文本以及图文混合的拖动效果。...

    弹出层拖动效果

    总结一下,实现"弹出层拖动效果"主要涉及以下几个步骤: 1. 创建HTML弹出层结构。 2. 使用JavaScript监听鼠标事件。 3. 在`mousedown`事件中记录初始位置。 4. 在`mousemove`事件中计算并更新位置。 5. 在`mouseup`...

    JavaScript实现几个层的任意拖动并能捕获顺序

    在JavaScript编程中,实现多个层(也称为div或其他HTML元素)的任意拖动以及捕获它们的顺序是一项常见的需求,特别是在构建交互式Web应用或网页布局设计时。本知识点将详细讲解如何通过JavaScript来实现这一功能。 ...

    JS实现拖动效果

    7. **事件委托**:对于具有多个可拖动元素的情况,可以使用事件委托来减少事件监听器的数量。在父容器上添加一个事件监听器,然后通过事件对象的`target`属性判断哪个子元素被点击,从而执行相应的操作。 8. **源码...

    可拖动的弹出层提示效果.rar

    总结来说,这个案例涵盖了JavaScript与DOM交互、事件处理、CSS定位等多个知识点,是学习前端开发和交互设计的良好实践。通过这个实例,开发者可以深入理解如何用JavaScript实现动态效果,并提升网页的用户体验。

    拖动多个div

    在标题“拖动多个div”中,我们关注的是如何使一个或多个 `div` 元素变得可拖动,即用户可以通过鼠标进行交互,自由地在页面上移动这些元素。这种功能在构建各种交互式界面时非常有用,例如,可以用于创建可自定义...

    DIV拖动效果

    这段代码的工作原理是,当鼠标按下时记录初始位置,然后在鼠标移动时计算出相对偏移量,并将这个偏移量加到`DIV`元素的初始位置上,从而实现拖动效果。 当然,实际应用中可能需要考虑更多细节,如防止元素拖出视口...

    JavaScript弹出层

    JavaScript弹出层是网页开发中常见的一种...开发者只需根据项目需求选择合适的库,并参考其文档进行配置和调用,就能轻松实现各种弹出层效果。如果"Dialog"库提供了详细的文档和示例,那么学习和使用起来将会更加便捷。

    各种js层特效,拖动层

    "各种js层特效,拖动层"这个主题主要涵盖了JavaScript在处理页面元素,特别是层(Layer)的效果以及拖放功能的应用。这里我们将深入探讨这些知识点。 **层特效(Layer Effects)** 层在网页设计中扮演着关键角色,...

    Javascript实现的类似Google的Div拖动效果代码

    从提供的文件内容中我们可以提炼出多个知识点,它们主要涉及JavaScript编程技术,以及如何实现网页元素(Div)拖动效果的详细过程。这些内容是Web前端开发领域中的实际应用技巧,对于希望深入了解JavaScript和网页...

    js窗口拖动效果

    在JavaScript编程中,实现窗口拖动效果是一项常见的需求,尤其在网页交互设计中。这个话题主要涉及以下几个核心知识点: 1. **DOM操作**:在JavaScript中,我们需要通过DOM(Document Object Model)来选取和操作...

    javascript无刷新窗口,鼠标壳拖动窗口位置

    总的来说,"javascript无刷新窗口,鼠标壳拖动窗口位置"涉及到了前端开发中的动态页面更新、用户交互设计以及JavaScript事件处理等多个方面,这些都是现代Web开发中的核心技能。通过熟练掌握这些技术,开发者可以...

    原生js制作简单的浮动div层拖动叠加效果

    原生JavaScript(不依赖于任何库如jQuery)制作的浮动div层拖动叠加效果,是一种增强用户体验的技术,使得用户可以通过鼠标拖动来改变div层的位置,实现动态交互。本篇文章将详细介绍如何利用JavaScript实现这一功能...

    弹出层拖动DEMO

    在IT行业中,弹出层(Popup Layer)是一种常见的用户界面元素,它用于显示临时或附加信息,而无需离开当前页面。...通过实践这个DEMO,你可以掌握弹出层拖动的核心技术,并在此基础上扩展出更多交互功能。

    DIV层拖动的实现,可改变大小.

    DIV层拖动和改变大小的实现有很多实际应用场景,例如: * 图片编辑器 * 文档编辑器 * 网页设计 * 视频播放器 * 游戏开发 七、结论 DIV层拖动和改变大小的实现是一个非常重要的技术,能够提高用户体验和交互性。...

    可任意拖动并使用事件最大最小化的层(多个层)

    在IT领域,尤其是在软件开发和用户界面设计中,"可任意拖动并使用事件最大最小化的层(多个层)"是一个关键概念,它涉及到用户体验、交互设计以及前端开发技术。这个话题主要涵盖两个核心点:一是层的拖动功能,二是...

    javascript拖动div或table等网页元素

    在JavaScript中,我们可以利用`addEventListener`方法监听`mousedown`、`mousemove`和`mouseup`这三个事件来实现拖动效果。当鼠标按下(mousedown)时,记录当前元素的位置;在鼠标移动(mousemove)时,更新元素的...

    Jquery插件 层拖动

    HTML文件中会包含一个或者多个可拖动的层,CSS文件用来设置层的样式,JavaScript文件则实现了上述的拖放功能。通过查看和学习这些文件,你可以更好地理解如何结合HTML、CSS和JavaScript来创建一个具有拖放功能的...

    js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml

    本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”,这是一项实用技术,尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先,让我们了解...

Global site tag (gtag.js) - Google Analytics