qq_39906279
2018-09-17 03:41
采纳率: 85.7%
浏览 655
已采纳

多个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>
    
    打赏 评论

相关推荐 更多相似问题