`
ariyue
  • 浏览: 345313 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

html 简单 div 拖动

阅读更多
解决:   div的 onclike ( this )  得到选择
            由 window.event 得到 鼠标 x y
            由 this.style.top/left 改变 div 位置

        var x,y;
        function mousedown(obj)
        {
            obj.onmousemove = mousemove;
            obj.onmouseup = mouseup;
           
            oEvent = window.event ? window.event : event;
            x = oEvent.clientX;
            y = oEvent.clientY;
        }
        function mousemove()
        {
            oEvent = window.event ? window.event : event;
            var _top = oEvent.clientY - y + parseInt(this.style.top) + "px"; // oEvent.clientY - y  为div 上 移动的位置 再反映到                                                                                //parseInt(this.style.top)
            var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
            this.style.top = _top;
            this.style.left = _left;
            x =  oEvent.clientX;
            y =  oEvent.clientY
        }
        function mouseup()
        {
            this.onmousemove = null;
            this.onmouseup = null;
        }
分享到:
评论

相关推荐

    html 拖动div进行相应顺序的排序,亲测可用,简单方便

    在拖放排序的场景中,HTML将创建一系列可拖动的div元素,每个元素代表待排序的一个项目。例如: ```html <div id="item1" class="draggable">Item 1</div> <div id="item2" class="draggable">Item 2</div> <div id...

    js实现简单div拖拽功能实例.docx

    JavaScript 实现简单的 Div 拖拽功能是一种常见的交互设计,常用于网页上的可操作元素,如窗口、面板或自定义控件。以下是对这个实例的详细解析: 首先,我们需要一个包含拖拽功能的 Div 元素。在 HTML 中,我们...

    拖拽+拖拽改变div大小

    在网页开发中,"拖拽+拖拽改变div大小"是一种常见的交互设计,它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...

    Div+CSS层完美实现拖拽特效

    本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效,这种特效常用于创建弹出层或可拖动的对话框,提升用户体验。 首先,要实现Div的拖拽功能,我们需要创建一个可拖动的Div元素,并为其添加CSS样式,使其...

    .net js代码实现div拖拽功能

    在.NET环境中,我们可以结合JavaScript(JS)来实现HTML元素,如div的拖拽功能。这是一种增强用户交互体验的常见技术,让用户可以通过鼠标操作在页面上移动特定的元素。下面我们将详细探讨如何实现这一功能。 首先...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧,开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中,还需要根据不同的项目需求,...

    遮罩 DIV拖动jquery遮罩 DIV 拖动

    在网页设计和开发中,"遮罩 DIV 拖动"是一种常见的交互效果,它允许用户通过鼠标拖动一个覆盖在页面上的半透明层(即遮罩层)来实现特定的功能或显示信息。jQuery 是一个广泛使用的 JavaScript 库,它简化了 ...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...

    JQuery拖拽DIV

    在网页开发中,动态交互效果往往能...本篇文章将深入讲解如何利用JQuery实现DIV元素的拖拽功能。 首先,确保在项目中引入了JQuery库。你可以通过CDN链接或者本地引入的方式添加JQuery到HTML文件中。例如: ```html ...

    div拖拽 关键在于对谁添加onmousemove事件 1积分

    我们将基于标题“div拖拽 关键在于对谁添加onmousemove事件”以及描述中的实例,来解析这个功能的关键点,并通过标签“javascript”,“div”,“拖拽”来延伸相关的JavaScript和HTML知识。 首先,让我们关注核心...

    js div拖动完美版

    在文件"SimpleDrag.htm"中,我们可以预期找到一个简单的HTML文件,其中包含了实现Div拖动功能的JavaScript代码。这个文件可能包含以下几个部分: 1. **HTML结构**:定义了一个或多个Div元素,这些元素可以通过...

    Jquery制作的DIV拖动效果

    总之,jQuery提供的强大功能使得实现如div拖动这样的交互效果变得相对简单。通过对鼠标事件的处理和CSS位置的动态调整,我们可以轻松创建出各种丰富的用户界面。而这个基础示例仅仅是jQuery在交互性方面潜力的一个...

    asp.net中实现可拖动div

    在提供的压缩包文件"move_div"中,可能包含了这个示例的完整代码,包括HTML、CSS和JavaScript文件,你可以参考这些文件来进一步学习和实现自己的可拖动div功能。通过这样的实践,你不仅可以提升在ASP.NET中使用...

    弹出一个可拖拽的div

    在网页开发中,创建一个可拖拽的div层是一项实用的技术,它允许用户通过鼠标操作移动界面元素,提升用户体验。这个技术主要涉及到HTML、CSS和JavaScript的交互运用,特别是JavaScript中的事件监听和DOM操作。接下来...

    div+css拖拽功能

    文件名"简单拖功能.html"可能是一个示例网页,展示了如何实现简单的拖拽功能。而".htm"文件可能包含有关使用Cookie记录拖动层位置的代码示例。通过查看这些文件,你可以更深入地理解拖拽功能的实现细节。 总的来说...

    jQuery鼠标拖动div层排序代码

    在本文中,我们将深入探讨如何使用jQuery实现一个简单的鼠标拖动div层进行排序的功能。这个功能允许用户通过鼠标操作,自由地改变div容器内li元素的排列顺序,从而提供更直观和互动的用户体验。 首先,我们需要理解...

    DIV拖拽效果

    这个简单的示例展示了如何使用HTML、CSS和JavaScript实现一个基础的DIV拖拽效果。然而,实际应用中可能需要考虑更多的边界情况,例如限制元素在容器内拖动、防止穿透其他元素(z-index)、处理窗口缩放等。此外,还...

    html的可移动的div

    首先,我们需要创建基本的HTML结构,一个简单的div元素作为我们要拖动的对象: ```html <!DOCTYPE html> <html lang="zh"> 可移动的div #draggable { width: 200px; height: 200px; background-color: #...

    jquery鼠标拖动层DIV源代码精简整理版

    在提供的`default.html`文件中,我们可以预期看到一个简单的HTML结构,其中包含一个或多个可拖动的`div`元素。而`jquery.js`文件则包含了实现拖动功能的jQuery代码。这些代码可能使用了如上所述的逻辑,但进行了精简...

    可拖动Div控件

    通过这样的方式,我们可以利用JavaScript实现一个简单的可拖动Div控件。这种技术在构建交互式的网页应用、拖放界面、可自定义布局的组件等场景中非常有用。理解并熟练掌握这一技术,有助于提升你的前端开发能力。

Global site tag (gtag.js) - Google Analytics