多个div浮窗的只有一个能移动的问题

同一个页面 显示多个div浮窗(多个浮窗的内容并不一样,也在不同的div中 演示代码里是只举例了一种) 只有一个能移动 请问那个是判断我现在移动的是哪个浮窗 ,怎么才能分别移动 不冲突呢? 如果我描述的不够清楚 我还可以补充说明。
演示代码如下:

<html>
<head>
<title>Js弹出浮动窗口,支持鼠标拖动和关闭</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/**
关于一些参数说明:
*bodycontent:要在窗口显示的内容,dom对象
*title:窗口标题,字符串类型
*removeable:窗口能否拖动,布尔类型
*注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/
function createdialog(width,height,bodycontent,title,removeable){
 if(document.getElementById("www_jb51_net")==null){
  /*创建窗口的组成元素*/
  var dialog = document.createElement("div");
  var dialogtitlebar= document.createElement("div");
  var dialogbody = document.createElement("div");
  var dialogtitleimg = document.createElement("span");
  var dialogtitle = document.createElement("span");
  var dialogclose = document.createElement("span");
  var closeaction = document.createElement("button");
  /*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/
  dialog.id = "223238909";
  /*组装对话框标题栏,按从里到外的顺序组装*/
  dialogtitle.innerHTML = title;
  dialogtitlebar.appendChild(dialogtitleimg);
  dialogtitlebar.appendChild(dialogtitle);
  dialogtitlebar.appendChild(dialogclose);
  dialogclose.appendChild(closeaction);
  /*组装对话框主体内容*/
  if(bodycontent!=null){
   bodycontent.style.display = "block";
   dialogbody.appendChild(bodycontent);
  }
  /*组装成完整的对话框*/
  dialog.appendChild(dialogtitlebar);
  dialog.appendChild(dialogbody);
  /*设置窗口组成元素的样式*/
  var templeft,temptop,tempheight//窗口的位置(将窗口放在页面中间的辅助变量)
  var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串
  templeft = (document.body.clientWidth-width)/2;
  temptop = (document.body.clientHeight-height)/2;
  tempheight= height-30;
 dialogcssText= "position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";
  dialogbodycssText = "width:100%;background:#ffffff;"+"height:" + tempheight + "px;";
  dialog.style.cssText = dialogcssText;
  dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;";
  dialogbody.style.cssText  = dialogbodycssText;
  dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";
  dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;";
  dialogclose.style.cssText  = "float:right;display:block;margin:4px;line-height:20px;";
  closeaction.style.cssText = "height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";
  /*为窗口元素注册事件*/
  var dialogleft = parseInt(dialog.style.left);
  var dialogtop = parseInt(dialog.style.top);
  var ismousedown = false;//标志鼠标是否按下
  /*关闭按钮的事件*/      
  closeaction.onclick = function(){
   dialog.parentNode.removeChild(dialog);
  }
  /*实现窗口的移动,这段代码很典型,网上很多类似的代码*/
  if(removeable == true){
   var ismousedown = false;
   var dialogleft,dialogtop;
   var downX,downY;
   dialogleft = parseInt(dialog.style.left);
   dialogtop = parseInt(dialog.style.top);
   dialogtitlebar.onmousedown = function(e){
   ismousedown = true;
   downX = e.clientX;
   downY = e.clientY;
   }
   document.onmousemove = function(e){
    if(ismousedown){
    dialog.style.top = e.clientY - downY + dialogtop + "px";
    dialog.style.left = e.clientX - downX + dialogleft + "px";
    }
   }
   /*松开鼠标时要重新计算当前窗口的位置*/
   document.onmouseup = function(){
    dialogleft = parseInt(dialog.style.left);
    dialogtop = parseInt(dialog.style.top);
    ismousedown = false;
   }
  }
  return dialog; 
 }//end if(if的结束)
}
</script>
<style>
table{background:#b2d235;}
button{font-size:12px;height:23;background:#ece9d8;border-width:1;}
#linkurl,#linkname,#savelink{width:100px;}
</style>
</head>
<body>
<!-- 显示窗口的地方 -->
<div id="here"></div><a id="clickhere" href="#">点击生成窗口</a>



<!-- 要嵌入到窗口的内容 -->
<div id="login" style="display:none;">
 <form action="#" method="post" onSubmit="return false;">
  <table width="400" height="95">
  <tr>
   <td width="78">链接文字</td>
   <td width="168"><input name="link.name" type="text" value="浮窗测试"/></td>
   <td width="138" id="linktext"></td>
  </tr>
  <tr>
   <td>链接地址</td>
   <td><input name="link.url" type="text" value="f"/></td>
   <td id="linkurl"></td>
  </tr>
  <tr>
   <td></td>
   <td><button type="submit" style="float:right;">添加</button></td>
   <td id="savelink"></td>
  </tr>
  </table>
</form>
</div>




<script type="text/javascript">
var here = document.getElementById("here");
var login = document.getElementById("login");
var clickhere = document.getElementById("clickhere");
clickhere.onclick = function(){
here.appendChild(createdialog(400,95+30,login,"中国外汇交易中心",true));
}


</script>
</body>
</html>

1个回答

你代码有问题,你这个代码原本是控制只能生成一个的if (document.getElementById("www_jb51_net") == null) ,这句就是,创建这个dom对象的代码视乎删除了,所以生成了多个

但是login这个div被被添加到最后一个创建的浮动窗体里面的,你添加多个其他浮动的都没内容了。改下面的就行,mousemove,mouseup放函数外部,用全局变量记录住相关对象和位置信息即可。


<html>
<head>
    <title>Js弹出浮动窗口,支持鼠标拖动和关闭</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        /**
        关于一些参数说明:
        *bodycontent:要在窗口显示的内容,dom对象
        *title:窗口标题,字符串类型
        *removeable:窗口能否拖动,布尔类型
        *注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/
        function createdialog(width, height, bodycontent, title, removeable) {

            /*创建窗口的组成元素*/
            var dialog = document.createElement("div");
            var dialogtitlebar = document.createElement("div");
            var dialogbody = document.createElement("div");
            var dialogtitleimg = document.createElement("span");
            var dialogtitle = document.createElement("span");
            var dialogclose = document.createElement("span");
            var closeaction = document.createElement("button");
            /*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/
            dialog.id = "223238909";
            /*组装对话框标题栏,按从里到外的顺序组装*/
            dialogtitle.innerHTML = title;
            dialogtitlebar.appendChild(dialogtitleimg);
            dialogtitlebar.appendChild(dialogtitle);
            dialogtitlebar.appendChild(dialogclose);
            dialogclose.appendChild(closeaction);
            /*组装对话框主体内容*/
            if (bodycontent != null) {////////////////////如果要设置不同内容,最好是传入不同的dom对象,同一个要clone过,要不会从其他对象对象中移除而添加到最新append的容器里面
                bodycontent = bodycontent.cloneNode(true)
                bodycontent.style.display = "block";

                dialogbody.appendChild(bodycontent);
            }
            /*组装成完整的对话框*/
            dialog.appendChild(dialogtitlebar);
            dialog.appendChild(dialogbody);
            /*设置窗口组成元素的样式*/
            var templeft, temptop, tempheight//窗口的位置(将窗口放在页面中间的辅助变量)
            var dialogcssText, dialogbodycssText;//拼出dialog和dialogbody的样式字符串
            templeft = (document.body.clientWidth - width) / 2;
            temptop = (document.body.clientHeight - height) / 2;
            tempheight = height - 30;
            dialogcssText = "position:absolute;background:#65c294;padding:1px;border:4px;top:" + temptop + "px;left:" + templeft + "px;height:" + height + "px;width:" + width + "px;";
            dialogbodycssText = "width:100%;background:#ffffff;" + "height:" + tempheight + "px;";
            dialog.style.cssText = dialogcssText;
            dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;";
            dialogbody.style.cssText = dialogbodycssText;
            dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);" + "display:block;margin:4px;line-height:20px;";
            dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;";
            dialogclose.style.cssText = "float:right;display:block;margin:4px;line-height:20px;";
            closeaction.style.cssText = "height:20px;width:24px;border-width:1px;" + "background-image:url(images/close.png);cursor:pointer;";

            /*关闭按钮的事件*/
            closeaction.onclick = function () {
                dialog.parentNode.removeChild(dialog);
            }
            /*实现窗口的移动,这段代码很典型,网上很多类似的代码*/
            if (removeable == true) {
                /////////////////////////////////////////这里初始化当前拖拽的对象和相关位置变了信息
                dialogtitlebar.onmousedown = function (e) {
                    dialogleft = parseInt(dialog.style.left);
                    dialogtop = parseInt(dialog.style.top);
                    downX = e.clientX;
                    downY = e.clientY;
                    currentObj = dialog
                }
            }
            return dialog;
        }
        var currentObj, dialogleft, dialogtop, downX, downY
        document.onmousemove = function (e) {
            if (currentObj) {console.log(downX,dialogleft,downY,dialogtop)
                currentObj.style.top = e.clientY - downY + dialogtop + "px";
                currentObj.style.left = e.clientX - downX + dialogleft + "px";
            }
        }
        /*松开鼠标时要重新计算当前窗口的位置*/
        document.onmouseup = function () {
            currentObj=null
        }
    </script>
    <style>
        table {
            background: #b2d235;
        }

        button {
            font-size: 12px;
            height: 23;
            background: #ece9d8;
            border-width: 1;
        }

        #linkurl, #linkname, #savelink {
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 显示窗口的地方 -->
    <div id="here"></div><a id="clickhere" href="#">点击生成窗口</a>



    <!-- 要嵌入到窗口的内容 -->
    <div id="login" style="display:none;">
        <form action="#" method="post" onsubmit="return false;">
            <table width="400" height="95">
                <tr>
                    <td width="78">链接文字</td>
                    <td width="168"><input name="link.name" type="text" value="浮窗测试" /></td>
                    <td width="138" id="linktext"></td>
                </tr>
                <tr>
                    <td>链接地址</td>
                    <td><input name="link.url" type="text" value="f" /></td>
                    <td id="linkurl"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button type="submit" style="float:right;">添加</button></td>
                    <td id="savelink"></td>
                </tr>
            </table>
        </form>
    </div>




    <script type="text/javascript">
        var here = document.getElementById("here");
        var login = document.getElementById("login");
        var clickhere = document.getElementById("clickhere");
        clickhere.onclick = function () {
            here.appendChild(createdialog(400, 95 + 30, login, "中国外汇交易中心", true));
        }


    </script>
</body>
</html>
qq_39906279
qq_39906279 已解决,虽然不是这个原因 仍采纳给币
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何使得很多个包含图片的div排列整齐?
-
html onmouseover如何对多个div层中的图片自动播放
-
部分安卓手机移动端微信网页初始化时不能隐藏多个div
-
为什么div加不加边框,盒内元素位置会移动很大呢?
-
多个id进行hover事件问题
-
div触发事件的热点问题
-
PHP交友系统怎么实现只有异性之间可以私信?
-
用js怎么在网页中实现多图片自由移动
-
求助一个php正则表达式的问题
-
Js制作anki模版,在PC和电脑没问题,但在安卓为什么不行?
-
如何获取数据库中的课程,并遍历
-
如果实现HTML5在手机上的图片划动效果
-
iscroll 怎么实现多区域滚动
-
关于制作EPG界面的光标聚焦问题(我制作的是IPTV)。可是一直为光标心烦,在线等解决答案!
-
短信交互的上下文分析
-
mui 安卓页面无法滚动
-
原生js手机切换 如何往一个方向切换的时候可以循环切换
-
急JS编写的计算器 如何实现 连续加减乘除四则运算 求大神指点 急帮我再看看小数点的问题
-
JS问题 帮我看看小数点怎么才能正常运算 我的有点问题 不能连续进行小数点运算
-
Linux文件操作高频使用命令
文章目录0.新建操作:1.查看操作2.删除操作3.复制操作4.移动操作:5.重命名操作:6.解压压缩操作 0.新建操作: mkdir abc #新建一个文件夹 touch abc.sh #新建一个文件 1.查看操作 查看目录: ll #显示目录文件详细信息 查看文件内容: cat|head|tail命令 cat abc.txt #查看abc的内容 head -5 abc.txt #...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点
目录 1、BMP格式图像 2、GIF格式图像 3、TIFF格式图像 4、PNG格式图像 5、JPG格式图像 6、SVG格式图像 7、总结 7.1、有损vs无损 7.2、索引色vs直接色 7.3、点阵图vs矢量图 7.4、总结 一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像...
高级软件工程师教会我的那些事儿
【CSDN编者按】以人为鉴,可明得失。对于新手程序员来说,面对复杂的开发需求很容易因为经验不足或技术不够娴熟等原因而踩坑。本文的作者表示:坐在高级软件工程师旁边工作或许可以事半功倍!长达一年的观察学习,他收获了包括编写代码、测试、设计、部署以及监控的一系列的长足进步。 声明:本文已获作者翻译授权,原文(https://neilkakkar.com/things-I-learnt-from-...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
MySQL数据库—SQL汇总
一、准备 下文整理常见SQL语句的用法,使用MySQL5.7测试,参考了尚硅谷MySQL教程及用例。用例sql: 链接: https://pan.baidu.com/s/1tb3-12MRNFjV8drFlN6wzg&amp;shfl=sharepset 密码: fc2h 为了方便查阅可从右侧目录快速索引 二、DQL(Data Query Language)数据查询语言 1、语句顺序 书写顺序...
黑客入门,从HTB开始
Hack the box 是国外的一个靶机平台,里面的靶机包含多种系统类型,并且里面可以利用的漏洞类型多种多样,有很多靶机其实非常贴近实战情景。因此 HTB 是一个很好的学习渗透测试靶场。 之前在 HTB 也玩过一些机器。里面的机器难度有好几个档次,insane 难度的一般都是极其困难的,这种机器一般让我对着大神的 Writeup 我可能都没有办法复现出来。之前也有在公众号上分享过几篇 H...
动画:用动画给女朋友讲解 TCP 四次分手过程
作者 | 小鹿 来源 | 公众号:小鹿动画学编程 写在前边 大家好,我们又见面了,做为一个业余的动画师,上次的用动画的形式讲解 TCP 三次握手过程再各大平台收到了广大读者的喜爱,说文章有趣、有货、有内容,也受到了很多读者的关注。很多读者留言说什么时候用动画讲一讲 TCP 四次挥手的过程,为了应大家的要求,今天我们就生动有趣的用动画给大家分享 TCP 四次挥手(分手)过程。 动画:用动画给...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
SQL基本语法入门 看这里就够了
SQL执行顺序 第一步:执行FROM 第二步:WHERE条件过滤 第三步:GROUP BY 分组 第四步:执行SELECT 投影列 第五步:HAVING条件过滤 第六步:执行ORDER BY排序 一、创建、删除库 -- 创建新数据库 CREATE DATABASE 数据库名; -- 删除数据库 DROP DATABASE 数据库名; 二、增加 1、添加列名、设置主键、设...
如何优化MySQL千万级大表,我写了6000字的解读
这是学习笔记的第2138篇文章 千万级大表如何优化,这是一个很有技术含量的问题,通常我们的直觉思维都会跳转到拆分或者数据分区,在此我想做一些补充和梳理,想和大家做一些这方面的经验总结,也欢迎大家提出建议。 从一开始脑海里开始也是火光四现,到不断的自我批评,后来也参考了一些团队的经验,我整理了下面的大纲内容。 既然要吃透这个问题,我们势必要回到本源,我把这个...
面试最后一问:你有什么问题想问我吗?
尽管,我们之前分享了这么多关于面试的主题: 高薪必备的一些Spring Boot高级面试题 面试必问:设计模式遵循的面向对象设计原则! 面试必问:怎么保证缓存与数据库的双写一致性? 27道高频Spring面试题,你能答对几个? 唠唠面试常问的:面向对象六大原则 一文高效图解二叉树面试题 Java面试中最高频的那20%知识点是什么? 百度面试题:求数组最大值 ... 然而,最后这个90%可见...
python 程序员进阶之路:从新手到高手的100个模块
在知乎和CSDN的圈子里,经常看到、听到一些 python 初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python 学到什么程度可以面试工作?》,真实反映了 python 程序员在成长过程中的一些困惑。
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
Linux/C/C++ 不可错过的好书
来源:公众号【编程珠玑】 作者:守望先生 ID:shouwangxiansheng 前言 经常有读者让我推荐书籍,这次我就把我私藏的计算机书单分享给你们!不过由于时间匆忙,不会进行更加详细的介绍。 声明 由于每个人的情况不一样,推荐的书并不一定适合你,也不一定适合当前阶段的你,有的书籍可能存在内容重复,所以根据自己的阶段情况进行选择即可。虽说如此,以下书单中提单的书均为优质书籍。...
计算机处理器基础原理笔记
一、CPU指令电路 1. 计算机每执行一条指令的过程,可以分解成这样几个步骤。 (1)Fetch(取得指令),也就是从PC寄存器里找到对应的指令地址,根据指令地址从内存里把具体的指令,加载到指令寄存器中,然后把PC寄存器自增,在未来执行下一条指令。 (2)Decode(指令译码),也就是根据指令寄存器里面的指令,解析成要进行什么样的操作,是MIPS指令集的R、I、J中哪一种指令,具体要操作哪...
单点登录(SSO)
一、SSO(单点登录)介绍 SSO英文全称Single SignOn,单点登录。SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制。它是目前比较流行的企业业务整合的解决方案之一。 实现机制 当用户第一次访问应用系统1的时候,因为还没有登录,会被引导到认证系统中进行登录;根据用户提供的登录信息,认证...
漫话:什么是 https ?这应该是全网把 https 讲的最好的一篇文章了
今天这篇文章,讲通过对话的形式,让你由浅入深着知道,为什么 Https 是安全的。 一、对称加密 一禅:在每次发送真实数据之前,服务器先生成一把密钥,然后先把密钥传输给客户端。之后服务器给客户端发送真实数据的时候,会用这把密钥对数据进行加密,客户端收到加密数据之后,用刚才收到的密钥进行解密。如图: 当然,如果客户端要给服务器发送数据,也是采用这把密钥来加密,这里为了方便,我采用单方向...
HTML CSS整理笔记
常见字体单位: 1.em 移动端常用的字体尺寸单位,说白em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。 但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小...
相关热词 c#多人合作开发项目策略 c# cad 坐标转换 c# 窗口内运行word c#线程睡眠 c# 静默打开打印机 c#获取当前路径的上一级 c# 去除线条 c# 取整倍数 c#窗体最大化控件不变 c# 程序更新程序案例