`
hje
  • 浏览: 288176 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

html div的移动

阅读更多
var i=1;
function enableDrag(o)
{
if (typeof o == "string")  o = document.getElementById(o); 
    o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; 
    o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
         
    o.onmousedown = function(a) 
    {
    this.style.zIndex = 100+i;
        i++;
        this.style.cursor = "move"; 
        var d=document; 
        if(!a)a=window.event; 
        var x = a.clientX+d.body.scrollLeft-o.offsetLeft; 
        var y = a.clientY+d.body.scrollTop-o.offsetTop;
       
        d.ondragstart = "return false;" 
        d.onselectstart = "return false;" 
        d.onselect = "document.selection.empty();" 

        //If the mousedown Event is in close button, close the layer and quit
        if ((parseInt(o.style.width) - 30)< x && x < (parseInt(o.style.width) - 10)
        && (10 < y && y < 30))
        {
        setFormInvisible(o.id);
        return;
        }                 
        if(o.setCapture) 
            o.setCapture(); 
        else if(window.captureEvents) 
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 

        d.onmousemove = function(a) 
        { 
            if(!a)a=window.event; 
            o.style.left = a.clientX+document.body.scrollLeft-x; 
            o.style.top = a.clientY+document.body.scrollTop-y; 
            o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; 
            o.orig_y = parseInt(o.style.top) - document.body.scrollTop; 
        } 

        d.onmouseup = function() 
        { 
            if(o.releaseCapture) 
                o.releaseCapture(); 
            else if(window.captureEvents) 
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
            d.onmousemove = null; 
            d.onmouseup = null; 
            d.ondragstart = null; 
            d.onselectstart = null; 
            d.onselect = null; 
            o.style.cursor = "normal";
        } 
    }


function disableDrag(o)

//alert(o);
    if (typeof o == "string")  o = document.getElementById(o); 
    o.onmousedown = null;
}
// End: Functions for enabling/disabling drag and drop
分享到:
评论

相关推荐

    div移动块(用于web上的小移动栏)

    总的来说,"div移动块"是网页动态效果和交互设计的一个重要组成部分,它涉及到HTML结构、CSS样式和JavaScript编程,能够提升用户的网页体验。通过研究和实践这样的项目,开发者可以提升自己的前端技能,更好地理解和...

    html的可移动的div

    总结一下,创建一个可移动的div涉及HTML结构的设定,CSS样式的应用,以及JavaScript事件监听和处理。HTML提供基础元素,CSS定义视觉样式和定位,而JavaScript负责实现交互逻辑。在这个案例中,我们学习了如何结合这...

    移动div(jquery)

    下面,我们将深入探讨这个主题,并结合“描述”中的“值得拥有”,来展示jQuery在处理div移动上的强大功能。 首先,让我们了解基础。在HTML中,div是一个块级元素,常用于组织页面结构。要移动一个div,我们需要...

    div移动并且排序的代码

    本项目探讨的核心是“div移动并且排序的代码”,这意味着我们将在一个交互式的环境中,允许用户通过拖放操作来调整`div`元素的位置,从而实现页面布局的动态调整。这种功能通常涉及到JavaScript和CSS3技术,特别是...

    DIV移动组件JavaScript

    `DIV` 移动组件是利用 JavaScript 实现的一种交互效果,允许用户通过编程方式控制 `DIV` 层的位置,为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...

    移动DIV简易实例

    在提供的"移动DIV.html"文件中,很可能会包含这些概念的实际应用。打开这个文件,你可以看到一个实际的`div`移动示例,通过查看和学习源代码,可以更好地理解以上知识点的实践。 总的来说,这个简单的`div`移动实例...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,...在实际应用中,可能还需要考虑响应式设计,确保在移动设备上的表现同样出色。

    JS实现鼠标拖动div移动(附效果演示).zip

    在JavaScript中,实现鼠标拖动div移动的效果是...同时,压缩包内的"JS实现鼠标拖动div移动(附效果演示)"很可能是包含了一个示例代码和运行效果的HTML文件,通过查看和运行这个文件,你可以更直观地理解和学习这个过程。

    DIV可移动布局

    在"DIV移动布局"中,关键在于使用JavaScript来赋予DIV元素拖动的功能。JavaScript是一种客户端脚本语言,它可以与用户的交互行为进行实时响应,比如鼠标点击和移动。这里提到的"Drag.js"可能就是实现这一功能的脚本...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    DIV层上下移动

    DIV层上下移动

    DiV层移动实例(纯JS仿赛我的个人小窝)

    首先,`div`是HTML中的一个块级元素,常用于布局和组织网页内容。在CSS中,我们可以对`div`进行样式设置,包括位置、大小、颜色等,以满足设计需求。在JavaScript中,我们可以通过操作DOM(文档对象模型)来改变`div...

    移动div+改变div大小+右键添加新的div+div只能在一个范围的。。JQ+js+html源码。。

    本项目涉及的核心知识点是使用JavaScript(JQ和原生JS)与HTML来实现`div`元素的动态交互功能,包括移动、大小调整、右键菜单以及限制`div`在特定范围内的操作。下面将详细解释这些技术点。 1. 移动`div`: 在HTML...

    DIV上下移动

    标题“DIV上下移动”指的是在网页开发中,如何通过JavaScript或者CSS实现一个名为DIV的HTML元素在页面上上下移动的效果。这种效果常用于创建动态用户界面,如按钮悬停动画或者提示信息显示等。让我们深入探讨一下...

    仿google拖动div移动

    2. 添加一个`mousemove`事件监听器,当用户移动鼠标时,计算div的新位置并更新其`left`和`top`样式属性,实现div的移动。 3. 当用户释放鼠标按钮时,移除`mousemove`事件监听器,防止不必要的移动。 以上代码是基础...

    HTML加js图片的翻转缩放移动和div分层

    本话题主要探讨如何利用HTML和JavaScript来实现图片的翻转、缩放、移动功能,并在移动过程中处理div的分层问题。 首先,我们需要在HTML中创建一个包含图片的div元素。HTML代码可能如下: ```html &lt;div id="image-...

    div随鼠标移动.html

    div随鼠标自由移动,代码简单,移动流畅,兼容ie、firefox、chrome等主流浏览器。

    js移动层和跟随鼠标的div

    首先,我们需要一个HTML结构,包含一个我们要移动的div元素。例如: ```html &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; 移动层跟随鼠标 #floatingDiv { position: absolute; width: 200px; height: 100px; ...

    鼠标拖动DIV,DIV移动后加载后台JSON数据

    当DIV移动到特定位置或满足某个条件时,如到达边界或停顿一段时间,我们可以发送一个AJAX请求到后台服务器,请求JSON格式的数据。 6. **AJAX请求**:使用`XMLHttpRequest`对象或jQuery的`$.ajax()`函数发送HTTP请求...

    DIV移动并排序JS效果

    本文将详细探讨"DIV移动并排序JS效果"这一主题,包括其核心概念、实现方法以及实际应用。 一、核心概念 1. DIV元素:在HTML中,`&lt;div&gt;` 是一个用于组合其他 HTML 元素的容器,它本身没有特定的语义,但可以用于...

Global site tag (gtag.js) - Google Analytics