`

js 拖拽div

 
阅读更多
var rDrag = {
    o:null,
    init:function(o){
    o.onmousedown = this.start;
    },
    start:function(e){
    var o;
    e = rDrag.fixEvent(e);
    e.preventDefault && e.preventDefault();
    rDrag.o = o = this;
    o.x = e.clientX - rDrag.o.offsetLeft;
    o.y = e.clientY - rDrag.o.offsetTop;
    document.onmousemove = rDrag.move;
    document.onmouseup = rDrag.end;
    },
    move:function(e){
    e = rDrag.fixEvent(e);
    var oLeft,oTop;
    oLeft = e.clientX - rDrag.o.x;
    oTop = e.clientY - rDrag.o.y;
    rDrag.o.style.left = oLeft + 'px';
    rDrag.o.style.top = oTop + 'px';
},
end:function(e){
    e = rDrag.fixEvent(e);
    rDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent: function(e){
    if (!e) {
    e = window.event;
    e.target = e.srcElement;
    e.layerX = e.offsetX;
    e.layerY = e.offsetY;
    }
    return e;
       }
    };
     rDrag.init(obj);//obj  is div object
分享到:
评论

相关推荐

    php+mysql+js拖拽div实例

    **一、JavaScript拖拽功能实现** 1. **事件监听**:首先,我们需要在HTML中为要拖动的Div添加`draggable`属性,然后使用JavaScript监听`dragstart`、`drag`和`dragend`事件。这些事件分别在拖动开始、拖动过程中和...

    js拖动div并拖动DIV的大小

    以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中,你可以选择使用库或框架,如jQuery UI的Resizable组件,来简化这一过程。然而,理解这些基础知识将帮助你更好地理解和定制功能,特别...

    可拖动div边框改变大小的方法

    可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。

    javascript 拖拽div

    javascript 拖拽 div 源代码,超简单

    js拖拽div随意摆放

    在JavaScript(js)中,实现div元素的拖拽功能是一项常见的需求,这通常涉及到用户交互和DOM操作。本文将深入探讨如何使用JavaScript实现这个功能,让div元素可以在页面上自由移动,实现“js拖拽div随意摆放”。 ...

    JS拖拽DIV后保存位置示例

    本示例“JS拖拽DIV后保存位置”是关于如何使用JavaScript实现用户可以拖动HTML中的<div>元素,并在拖动后保存其位置。通达OA(Tongda Office Automation)是一款企业级协同办公软件,此实例可能是为通达OA的自定义...

    DIV 拖动 JS移动DIV DIV位置移动

    DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动

    javascript拖拽DIV技巧

    ### JavaScript 拖拽 DIV 技巧详解 #### 一、引言 随着 Web 技术的不断发展,用户界面的设计也变得越来越丰富多样。其中,拖拽(Drag and Drop)功能因其直观的操作方式和良好的用户体验而被广泛应用于各类网页应用...

    js拖动、拖拽div大小,完美实现版

    js拖动 拖拽div大小,内部随意文件操作。完美实现版

    js可拖拽停靠吸附DIV

    "js可拖拽停靠吸附DIV"这个主题涉及的技术点主要包括:JavaScript基础、DOM操作、事件处理、CSS定位以及可能的自定义动画效果。 1. **JavaScript基础**: - **变量与数据类型**:在实现拖拽功能时,我们需要声明并...

    js实现弹出div任意拖拽

    在JavaScript(JS)中,实现一个可任意拖拽的弹出div是一项常见的需求,尤其在构建交互式Web应用时。这个功能可以增加用户界面的动态性和用户体验。下面将详细介绍如何利用JavaScript来实现这一功能。 首先,我们...

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

    这个功能允许用户通过拖动div元素来改变它们在页面上的顺序,从而实现自定义排序。 首先,HTML(超文本标记语言)是网页的基础结构语言,它定义了网页的各个部分,如标题、段落、链接等。在拖放排序的场景中,HTML...

    jQuery+blockDrag.js拖动div栅格布局代码

    "jQuery+blockDrag.js拖动div栅格布局代码"是一个实现此类功能的示例,它允许用户通过鼠标拖动来调整div元素的位置,并自动吸附到预定义的网格中,确保布局整洁且对齐。接下来,我们将深入探讨这个解决方案的核心...

    JS完美拖拽+拖动改变Div的宽高+关闭按钮

    提供的压缩包中的`完美拖拽拖动改变Div的宽高关闭按钮.html`文件包含了实现上述功能的HTML、CSS和JavaScript代码。通过阅读和理解这段代码,可以深入学习到如何结合HTML布局、CSS样式和JavaScript事件处理来创建...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能通常采用原生 JavaScript 实现。 #### 实现步骤 1. **绑定事件监听器**:为 Div 绑定 `mousedown` 事件,当用户按下鼠标左键时触发。 2. **获取...

    JS拖动DIV,适用于弹出窗口

    JS拖动DIV,适用于web开发,拖动弹出窗口,简单易用!!

    拖拽+拖拽改变div大小

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

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

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

    3个js拖动DIV移动位置的特效代码.rar

    本下载包包括了3个js拖动特效,拖动DIV移动指定位置,一个实例是任意位置的拖动,不受限制,想拖动到哪里就拖动到哪里;另一个是指定位置的拖动,由左侧拖动到右侧指定位置,拖动结束后,左侧会少一个DIV,右侧新增...

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

    通过这个例子,开发者可以学习到如何实现JavaScript拖拽功能,以及如何与不同的数据存储机制集成,从而在实际项目中灵活应用。 总的来说,这个主题涵盖了JavaScript事件处理、DOM操作、数据序列化、Ajax通信以及...

Global site tag (gtag.js) - Google Analytics