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

可以拖动的div

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试可动div</title>
<script language='javascript' type='text/javascript'>
var offset_x;
var offset_y;
function Milan_StartMove(oEvent,div_id)
{
    var whichButton;
    if(document.all&&oEvent.button==1) whichButton=true;
    else { if(oEvent.button==0)whichButton=true;}
    if(whichButton)
    {
        var oDiv=div_id;
        offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
        offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
        document.documentElement.onmousemove=function(mEvent)
        {   
            var eEvent;
            if(document.all) eEvent=event;
            else{eEvent=mEvent;}
            var oDiv=div_id;
            var x=eEvent.clientX-offset_x;
            var y=eEvent.clientY-offset_y;
            oDiv.style.left=(x)+"px";
            oDiv.style.top=(y)+"px";
            var d_oDiv=document.getElementById("disable_"+oDiv.id);
            d_oDiv.style.left=(x)+"px";
            d_oDiv.style.top=(y)+"px";
        }
    }
}
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }
function div_Close(o)
{var oDiv=o; oDiv.style.display="none";var d_oDiv=document.getElementById("disable_"+o.id);d_oDiv.style.display="none";}
</script>
</head>
<body>
<div id="oDiv" style="position:absolute;width:100px;height:60px;border:1px solid silver;left:100px;top:100px;z-index:9999;">
<div id="move" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)"
style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;">
<div onclick="div_Close(this.parentNode.parentNode)" style="float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:White;font-size:15px;">X</div>
</div>
<span>测试一下</span>
</div>
<div id="disable_oDiv" style="position:absolute;left:100px;top:100px;width:100px; height:60px; z-index:9998;FILTER:alpha(opacity=50);";>
<iframe src="about:blank" name="hiddenIframe" width="100%" frameborder="0" height="60px" title="遮盖层"></iframe></div>
<select name="ListHead1$DropDownList3" id="ListHead1_DropDownList3">
<option selected="selected" value=""></option>
<option value="2">3333</option>
<option value="6">1111</option>
<option value="B">222</option>
</select>
</body>
</html>

 

分享到:
评论

相关推荐

    用Jquery实现DIV锁屏并且可以拖拽DIV窗体代码页面

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件...在《用Jquery实现DIV锁屏并且可以拖拽DIV窗体代码页面.docx》文档中,你可以找到更详尽的代码示例和解释,以便进一步学习和应用。

    仿IGoogle可以拖动DIV

    标题中的“仿IGoogle可以拖动DIV”指的是创建一个类似于Google个性化主页(iGoogle)的交互式界面,其中各个模块(通常用DIV元素表示)可以被用户自由拖动以调整布局。这种功能在Web开发中常用于构建高度自定义和...

    拖动div的四个拐角改变其大小

    总之,通过利用jQuery UI库中的Resizable和Draggable插件,我们可以轻松地实现在Web页面上拖动div的四个角来改变其大小的功能,同时也能方便地拖动div在限制范围内移动,极大地增强了用户的交互体验。

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

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

    拖拽+拖拽改变div大小

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

    基于jQuery可拖动的div,Demo

    本教程将深入探讨如何使用jQuery库来实现一个可拖动的div元素,这在创建交互式用户界面时非常有用。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个"基于...

    拖动多个div

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

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

    这里的`draggable`类用于应用CSS样式,确保这些div可以被拖动。而`id`属性则为每个元素提供了唯一的标识,便于JavaScript操作。 接着,JavaScript是实现拖放功能的关键。这里使用的是HTML5的拖放API,它提供了一...

    js拖动div并拖动DIV的大小

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

    js拖拽div随意摆放

    本文将深入探讨如何使用JavaScript实现这个功能,让div元素可以在页面上自由移动,实现“js拖拽div随意摆放”。 首先,我们需要创建一个可拖动的div元素。在HTML中,我们可以这样定义: ```html &lt;div id=...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    div可以是任意包含待拖动数据的元素,而表格则需有一个tbody元素作为放置目标。 ```html &lt;div class="draggable-div"&gt;待拖动的值&lt;/div&gt; &lt;tr&gt;&lt;th&gt;列标题&lt;/th&gt;&lt;/tr&gt; ``` 4. **CSS样式**: 为了提高...

    asp.net中实现可拖动div

    通过这些事件,我们可以实现div的拖动功能: 1. 在mousedown事件中,记录初始鼠标位置和div的当前位置。 2. 在mousemove事件中,计算鼠标当前位置与初始位置的差值,并更新div的位置。 3. 在mouseup事件中,停止...

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

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

    php+mysql+js拖拽div实例

    **PHP + MySQL + JS 拖拽Div实例详解** 在Web开发中,用户交互性是提升用户体验的关键因素之一。拖拽功能(Drag and Drop)可以让用户通过鼠标直接操作页面元素,增强了网页的互动性。本实例将介绍如何使用PHP、...

    拖动div到另一个div中

    我们可以将被拖动div的ID存储在这里: ```javascript function handleDragStart(event) { event.dataTransfer.setData('text/plain', this.id); } ``` - **handleDrag**:通常这个事件用于更新视觉效果,比如...

    复制并拖拽Div

    总的来说,“复制并拖拽Div”是提升用户体验的一种有效手段,通过HTML、CSS和JavaScript的协同工作,我们可以创建出高度交互和动态的网页。理解和掌握这些技术对于任何前端开发者来说都是至关重要的,尤其是在创建富...

    jQuery可拖拽DIV页面

    本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI,实现了一个用户界面元素(如div)可以被拖动的功能,从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解: 1. **jQuery基础**:jQuery...

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

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

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

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

    透明div可以拖动 Jquery特效,CSS+DIV

    透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV

Global site tag (gtag.js) - Google Analytics