div + css 拖动层

最新推荐文章于 2023-11-30 08:39:27 发布
最新推荐文章于 2023-11-30 08:39:27 发布
阅读量780 收藏
点赞数
分类专栏： javascript 文章标签： css div dialog function border null
<!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 || "http://www.jsgod.net/test/images/window_blur.gif";
    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 = "http://www.jsgod.net/test/images/min.gif";
                }
                else{
                    obj.on = "true";
                    obj.src = "http://www.jsgod.net/test/images/max.gif";
                }
            }
            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" ? "http://www.jsgod.net/test/images/min.gif" : "http://www.jsgod.net/test/images/max.gif";
                        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;" οncοntextmenu="return false;" οndragstart="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="http://www.jsgod.net/test/images/min.gif" height="13" width="13" title="最小化" on="false" hspace="1" οnmοuseοver="style.borderColor=/'lightblue/'" style="border:solid 1px #ffffff" οnmοuseοut="style.borderColor=/'#ffffff/'"/><img src="http://www.jsgod.net/test/images/close.gif" width="13" height="13" title="关闭" style="border:solid 1px #ffffff;" οnmοuseοver="style.borderColor=/'lightblue/'" οnmοuseοut="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>
qiaolunihao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Div+CSS层完美实现拖拽特效
07-06
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...
div 拖拽
weixin_45264424的博客
03-30 139
css .box { width: 100px; height: 100px; top: 100px; left: 100px; position: absolute; background-color: pink; } // An highlighted block var foo = 'bar'; $(".box").on("mousedown",function (e) { var disX=e.offsetX; var disY=e.offsetY; var top=$(
div可视化拖动 随着鼠标拖动div，可以自由拖动
zhh_5的博客
12-19 1131
div可视化拖动
有趣且重要的css知识合集（1）纯css实现div左右拖拽效果
qq_39404437的博客
02-08 3311
目前我看主流的都是用js来实现div拖拽效果，不过我个人觉得一直监听拖拽，会耗费很大的性能，毕竟监听盒子的宽高这些属性，都会触发浏览器的回流，并且我看了很多博客，他们是能用css实现div左右拖拽效果，但是并没有一个最小或者最大宽度的限制，导致直接将左右子div压扁。 蓝色虚线是当鼠标移上去的时候，显示的拖拽线 大多数博客的拖拽 这种拖拽会将左div或者右div直接压扁，但是我肯定不想做成这样子，我想左div有最大和最小宽度限制，然后右div是自适应宽度 我实现的拖拽 左最小宽度，我.
从基础到进阶：实现div控件的拖拽和缩放功能
Twinkle_sone的博客
11-30 2688
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
html css 移动元素,css样式中怎么移动div？
weixin_32509847的博客
07-02 2705
在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。css样式中移动div的方法：一、使用css3 transform:translate(X,Y)来偏移元素1、transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。使用tr...
div+css拖拽功能
08-30
通过CSS，我们可以为`<div>`设置样式，包括宽度、高度、边距、背景色等，使其成为可拖动的层。 CSS在拖拽功能中主要负责样式设定和定位。通过设置`position`属性为`absolute`或`relative`，我们可以让`<div>`相对于...
DIV+CSS拖拽功能
07-21
结合`DIV+CSS`、JavaScript拖拽、`Ajax`以及`Asp.net`，我们可以构建出交互性强、用户体验良好的网页组件。在实际开发中，还需要考虑浏览器兼容性、性能优化等问题，以确保功能在各种环境下都能稳定运行。
网页开发DIV+CSS谷歌响应式插件.zip
09-14
网页开发中的"DIV+CSS"是一种常见的布局技术，它在构建网页时起着至关重要的作用。DIV（Division）是HTML中的一个容器元素，用于组织页面内容，而CSS（Cascading Style Sheets）则是用于控制这些元素样式和布局的...
CSS如何动态下拉div盒子、移动div盒子和展开div盒子
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-18 1637
css是层叠样式表，是一种用于网页设计的语言，它可以为HTML和XML文档添加样式和布局。我们通过css可以控制文本的颜色、字体大小、字体间距等等。css是强大的工具，它可以使我们的网页更加的美观，提高用户的阅读体验！动态下拉、移动和动态移动展开。
弹出可拖动DIV，CSS圆角
03-18
NULL 博文链接：https://happysoul.iteye.com/blog/591785
css+div+js页面实现div拖动HTML版
07-10
页面拖动简单例子,asp.NET能用，可以从后台拼动态代码，能满足基本需求
【HTML】【JS】【CSS】实现可移动div窗体，超出浏览器大小将返回边缘。
南方者的博客
05-28 995
实现可移动div窗体，出现超出浏览器窗口大小时，将会返回到边缘边界处。实现流程：先创建节点，把节点塞进body内。对该节点进一步进行添加方法。（也可以直接创建好div并加上id，再在js里根据i...
div拖拽功能实现
maise6666的博客
06-21 1506
div拖拽移动
简单实现可拖拽的div
sunxiaobai1的博客
11-22 2567
【代码】简单实现可拖拽的div。
css元素拖拽
llllllhy_的博客
02-26 689
css元素拖拽
可拖动DIV层的实现方法
热门推荐
2byte
06-15 1万+
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲讲实现方法与关键点。先来看看效果：在线实例DEMO基本思路 有一个DIV层，设定position属性为absolute或fixed，通过更改其left，top来更改层的相对位置。 在DIV层上绑定
html怎么设置一个div可以左右移动,利用css 使div上下左右移动
weixin_30258621的博客
06-11 9984
在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素①transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。其基本属性如下所示：值 描述non...
div拖拽互换位置（vue）
weixin_30273763的博客
02-02 745
template模板 <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'...
使用javascript+css+div创建动态用户界面
最新发布
12-24
JavaScript和CSS可以结合使用来创建动态用户界面。通过使用JavaScript来操作HTML和CSS，我们可以动态地改变页面上各个元素的样式和内容。 首先，我们可以使用JavaScript来控制页面上的div元素。可以通过添加事件监听器来响应用户的操作，比如点击按钮、拖拽元素等。使用JavaScript可以为div元素添加动画效果、改变尺寸、位置、颜色等样式。 其次，CSS可以用来设定div元素的样式。通过CSS可以设置div元素的背景颜色、边框样式、圆角、阴影等。还可以使用CSS来响应不同屏幕尺寸的布局变化，使用户界面在不同设备上都能正常显示。 另外，我们还可以使用JavaScript来监控用户输入，并实时更新div元素的内容。比如，当用户在输入框中输入文字时，JavaScript可以立即将其显示在页面上的div元素中。 总的来说，通过JavaScript和CSS，我们可以创建一个动态的用户界面，用户可以通过交互式操作来改变页面上的各个元素，带来更加丰富、灵活和用户友好的体验。JavaScript能够实现页面上div元素的动态操作，而CSS能够为div元素设定样式，两者结合使用可以创造出丰富多彩的用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值