用javascript拖动DIV层

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量528 收藏
点赞数
文章标签： javascript dialog function border table null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snjdju/article/details/5823758
版权
  1. <html>   
  2. <head>   
  3. <title>用javascript拖动DIV层</title>   
  4. <style>   
  5. body{font-family:Verdana;font-size:11px;color:#333;}   
  6. #win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}   
  7. .title{width:100%;background:#000;height:18px;color:#fff;cursor: move;}    
  8.  </style>   
  9.  </head>   
  10. <body>    
  11. <script>   
  12. var move=false;    
  13. function StartDrag(obj)                          
  14. {   
  15.  if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")   
  16.  {   
  17.   obj.setCapture();   
  18.   obj.style.background="#999";   
  19.   move=true;   
  20.  }    
  21. }function Drag(obj)                      
  22. {   
  23.  if(move)   
  24.  {   
  25.   var oldwin=obj.parentNode;   
  26.   oldwin.style.left=event.clientX-100;   
  27.   oldwin.style.top=event.clientY-10;   
  28.  }   
  29. }function StopDrag(obj)   
  30. {   
  31.   obj.style.background="#000";   
  32.   obj.releaseCapture();   
  33.   move=false;   
  34. }    
  35. </script>    
  36. <div id="win1">   
  37. <div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>   
  38. This is a moveable window.<br>   
  39. Moreinfo in    
  40. </div>   
  41. </body>    
  42. </html>   

下面一个没使用过

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta content="text/html;charset=gb2312" http-equiv="content-type">
<style>
*{font-size:9pt;font-family:宋体;line-height:130%;}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Global = new Object();
Global.__UniqueID = 0;
Global.GetUniqueID = function(){ return "__MT_UID_" + Global.__UniqueID ++;};
function Dialog(title,icon,body){
    this.Icon = icon || "";
    this.Title = title || "Untitled Document";
    this.Body = body || "Blank Document";
    this.UniqueID = Global.GetUniqueID();
    //
    this.Width = 400;
    this._mousedown = false;
    this._offsetX = 0;
    this._offsetY = 0;
    this._x = 0;
    this._y = 0;
    var i,l;
    //
    this.SetRect = function(_width,_top,_left){
        var obj;
        if(_width > 200) this.Width = _width;
        this._x = _left;
        this._y = _top;
        obj = document.getElementById(this.UniqueID);
        if(obj){
            obj.style.width = this.Width;
            obj.style.top = _top;
            obj.style.left = _left;
        }
    }
    this.SetIndex = function(index){
        if(isNaN(index)) return;
        var obj = document.getElementById(this.UniqueID);
        if(obj) obj.style.zIndex = index;
    }
    this.BindEvent = function(){
        var self = this,obj = null;
        var table = document.getElementById(this.UniqueID);
        if((null == table)||(table.tagName != "TABLE")) return;
        if(table.rows&&table.rows[0].cells&&table.rows[0].cells[0]&&table.rows[0].cells[0].firstChild){
            obj = table.rows[0].cells[0].firstChild;
            obj.rows[0].cells[2].lastChild.onclick = function(e){
                var obj = document.getElementById(self.UniqueID);
                if(obj) obj.parentNode.removeChild(obj);
            }
            obj.rows[0].cells[2].firstChild.onclick = function(e){
                e = window.event || e;
                var obj = document.getElementById(self.UniqueID);
                if(obj&&obj.rows&&obj.rows.length){
                    with(obj.rows[1].style){
                        display = display == "" ? "none" : "";
                    }
                }
                obj = (e.target || e.srcElement);
                if(obj.on == "true"){
                    obj.on = "false";
                    obj.src = "";
                }
                else{
                    obj.on = "true";
                    obj.src = "";
                }
            }
            if(obj.rows&&obj.rows[0].cells&&obj.rows[0].cells[0].firstChild) obj = obj.rows[0].cells[0].firstChild;
            obj.onmousedown = function(e){
                e = window.event || e;
                if(e.cancelBubble) e.cancelBubble();
                //Firefox....
            };
            obj.ondblclick = function(){ self.Close();};
            table.onmousedown = function(){
                var obj;
                if(Dialog.ObjectRef&&(this != Dialog.ObjectRef)){
                    obj = document.getElementById(Dialog.ObjectRef.UniqueID);
                    if(obj){
                        obj.style.borderColor = "#cccccc";
                        obj.style.zIndex = 90;
                        obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window_blur.gif";
                    }
                }
                obj = document.getElementById(self.UniqueID);
                if(obj){
                    obj.style.borderColor = "lightblue";
                    obj.style.zIndex = 99;
                    obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window.gif";
                }
                Dialog.ObjectRef = self;
            }
        }
        if(table.rows){
            table.rows[0].cells[0].firstChild.rows[0].cells[1].onmousedown = function(e){
                var obj;
                e = window.event || e;
                self._dragable = true;
                obj = document.getElementById(self.UniqueID);
                if(null == obj) return;
                self._x = e.clientX;
                self._y = e.clientY;
                self._offsetX = parseInt(obj.style.left);
                self._offsetY = parseInt(obj.style.top);
            }
            table.onmouseover = function(e){
                e = window.event || e;
                var obj = document.getElementById(self.UniqueID);
                if(obj) obj.style.cursor = "default";
               
            };
            table.onmouseup = function(e){
                var obj;
                e = window.event || e;
                self._dragable = false;
                obj = document.getElementById(self.UniqueID);
                if(obj) obj.style.cursor = "default";
            }
            table.rows[0].ondblclick = function(e){
                obj = document.getElementById(self.UniqueID);
                if(null == obj) return;
                if(obj.rows&&(obj.rows.length > 1)){
                    with(obj.rows[1].style){
                        display = display == "" ? "none" : "";
                        obj = obj.rows[0].cells[0].firstChild.rows[0].cells[2].firstChild;
                        obj.src = obj.on == "true" ? "" : "";
                        obj.on = obj.on == "true" ? "false" : "true";
                    };
                }
            }
        }
    }
    this.Close = function(){
        var table = document.getElementById(this.UniqueID);
        if(table) table.parentNode.removeChild(table);
    }
    this.toString = function(){
        var shtml = '';
        shtml += '<table cellpadding="0" cellspacing="0" border="1" onselectstart="return false;" oncontextmenu="return false;" ondragstart="return false;" bgcolor="#ffffff" id="' + this.UniqueID + '" style="border:solid 1px #cccccc;cursor:default;width:' + (this.Width) + 'px;position:absolute;top:' + this._y + 'px;left:' + this._x + 'px;">';
        shtml += '<tr height="20"><td style="border:0px;"><table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td width="20"><img src="' + this.Icon + '" width="16" height="16"/></td><td align="left"><span style="width:200px;overflow:hidden;" title="' + this.Title + '">' + this.Title + '</span></td><td width="32"><img src="" height="13" width="13" title="最小化" on="false" hspace="1" onmouseover="style.borderColor='lightblue'" style="border:solid 1px #ffffff" onmouseout="style.borderColor='#ffffff'"/><img src="" width="13" height="13" title="关闭" style="border:solid 1px #ffffff;" onmouseover="style.borderColor='lightblue'" onmouseout="style.borderColor='#ffffff'"/></td></tr>';
        shtml += '</table></td></tr>';
        shtml += '<tr style="display:;"><td style="border:0px;padding:5px;border-top:solid 1px #cccccc;" valign="top">' + this.Body + '</td></tr>';
        shtml += '</table>';
        return shtml;
    }
}
document.onmousemove = function(e){
    var _x,_y,obj;
    e = window.event || e;
    if(null == Dialog.ObjectRef) return;
    obj = document.getElementById(Dialog.ObjectRef.UniqueID);
    if(null == obj) return;
    if(Dialog.ObjectRef._dragable){
        obj.style.top = Dialog.ObjectRef._offsetY + e.clientY - Dialog.ObjectRef._y;
        obj.style.left = Dialog.ObjectRef._offsetX + e.clientX - Dialog.ObjectRef._x;
        obj.style.cursor = "move";
    }
}

Dialog.ObjectRef = null;
var dialog = new Dialog("哇哈哈",null,"Matrixy Herry");
document.write(dialog);
dialog.BindEvent();
dialog.SetIndex(1);
dialog.SetRect(400,100,200);

var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>');
document.write(dialog1);
dialog1.BindEvent();
dialog1.SetIndex(2);
dialog1.SetRect(350,100,250);

var dialog2 = new Dialog("Hello World");
document.write(dialog2);
dialog2.BindEvent();
dialog2.SetIndex(24);
dialog2.SetRect(380,10,20);

var dialog3 = new Dialog("4");
document.write(dialog3);
dialog3.BindEvent();
dialog3.SetRect(390,200,100);

var dialog4 = new Dialog("5");
document.write(dialog4);
dialog4.SetIndex(340);
dialog4.BindEvent();



//-->
</SCRIPT>
</BODY>
</HTML>

snjdju
关注
javascript 拖动div的一种实现
12-05 434
javascript 拖动div的一种实现，在项目中用到的 var drag_=false; var D=new Function('obj','return document.getElementById(obj);'); var oevent=new Function('e','if (!e) e = window.event;return e'); function Move_ob
js拖拽div的例子
qq_45089709的博客
07-17 427
【代码】js拖拽div的例子。
详解原生JavaScript实现div拖拽功能
www.hhspace.cn
04-24 1326
div拖拽是使用JavaScript操作HTML元素最基本的一个功能，在很多现有JavaScript库中都实现了这一功能，例如jQuery UI中可以很方便的实现各种拖拽功能，但是在实际操作中尤其是找工作笔试或者面试中，通常要求使用原生JavaScript来实现拖拽功能，所以熟悉div拖拽的原生实现方法很有必要。 通常关于拖拽功能的描述指的是鼠标点击到某元素之后滑动鼠标，该元素会随着鼠标一起滑动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-10 1737
【代码】【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动。
JavaScript 拖拽div
Tml的博客
05-03 195
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽div</title> <style type="text/css"> #box1{ width: 60px; height: 60px; background-color: green; position: absolute; } #box2{ wid.
JavaScript div层拖拽左右移动
hly_rain的专栏
10-16 2230
用文件保存该代码即可执行，需要引入jquery.js文件，花了我两天时间才做成，不过还有待改进。 可以兼容IE9到IE11，谷歌浏览器，火狐暂时不兼容，页面底下包括浏览器判断，，读者可以依此去想办法兼容其他浏览器
原生JavaScript实现div拖拽
kiku
08-02 293
原生JavaScript实现div拖拽 一，HTML代码 <div id="div"></div> 二，CSS代码 *{ margin: 0; padding: 0; } #div{ width:50px; height:50px...
JavaScript 鼠标拖拽div 改变其大小
acoolgiser的博客
12-06 4342
转自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想让div实现拖拽改变大小功能，类似于soso地图（即现在的腾讯地图）的看街景时地图可以拖拽等功能 分析一下，实现这个功能需要：鼠标按下，鼠标移动和鼠标抬起几个功能方能实现，那么找到相应的js事件：mousedown、mousemove、mouseup 找...
JavaScript实现鼠标拖拽调整div大小
beichen3997的博客
11-02 4477
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { width: 100%; height: 100%; margin: 0; } #container { width: 200px; height: 200px; .
JavaScript实现DIV层拖动及动态增加新层的方法
10-24
JavaScript实现DIV层拖动及动态增加新层的方法主要涉及两个方面的内容：一是实现DIV层的拖动功能；二是实现动态增加新层的功能。下面详细解释这两个知识点： 首先，DIV层的拖动功能涉及到鼠标事件的监听和处理。在...
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
利用javascript移动div层-javascript 拖动层
10-30
本篇将详细解释如何利用JavaScript来实现一个可拖动的div层。 首先，我们需要理解HTML部分。在这个例子中，我们有一个id为`div_Info`的div元素，它设置了`position: absolute`，这意味着它将在页面上相对于其最近的...
JavaScript拖动层Div代码
10-20
JavaScript拖动层Div是网页开发中的一个常见功能，它允许用户通过鼠标拖动来改变Div元素的位置。在本文中，我们将深入探讨如何实现这个功能，以及相关的核心代码和原理。 首先，实现JavaScript拖动层Div的基本步骤...
JS-常用功能
qq_40950398的博客
10-18 146
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 757
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 682
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 792
请联系我获取更详细的演示视频。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 615
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
基于SpringBoot的冬奥会科普平台
weixin_53180424的博客
10-16 330
系统展示 【2024最新】基于Java+SpringBoot+Vue+MySQL的，前后端分离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值