Question

我已经在JavaScript中拖放了弹出窗口，它被正确拖动到所有方向但是向下拖动。当我将弹出窗口向下拖动时，没有正确触发鼠标事件。所以即使我释放鼠标它也在移动。我真的搞砸了这个bug。请帮助......我必须紧急解决它......

这是我的代码..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style>
body{
 margin:0px;
 padding:0px;
}
iframe{
  width:800px;
  height:500px;
}
img{border:none;}

.parentDisabled
{
 width:100%;
 height:100%
 background-color:red;
 position:absolute;
 top:0;
 left:0;
 display:block;
 border:1px solid blue;
}
#popup{
   position:absolute;
   width:800px;
   height:500px;
   border:2px solid #999188;  
  display:none;
 }

 #header{
 padding-right:0px;
 width:800px;
 }

 #close{
  cursor:hand;  
  width:15px;
  position: absolute;
  right:0;
  top:0;
  padding:2px 2px 0px 0px;
 }

 #move{
 cursor:move;
 background:#999188;
 width:800px;
 line-height:10px;
 }

 #container{

 }
 .navigate{
  border:1px solid black ;
  background:#CC00FF;
  color:white;
  padding:5px;
  cursor:hand;
  font-weight:bold;
  width:150px;
 }

</style>
</HEAD>

<BODY>
<div onClick="showPopUp('w3schools');" class="navigate">W3Schools</div>
<div onClick="showPopUp('yahoo');" class="navigate">Yahoo</div>
<div onClick="showPopUp('linkedin');" class="navigate">LinkedIn</div>
<div onClick="showPopUp('vistex');" class="navigate">Vistex</div>

<div id="popup">
       <div id="header">
        <span id="move"></span>
        <span id="close"><img src="close_red.gif" onClick="closePopUp()" alt="Close"/></span>   
       </div> 

      <div id="container">
          <iframe name="frame" id="Page_View" frameborder=0>
              page cannot be displayed
          </iframe>
      </div>

    </div>
</BODY>

<script>

var popUpEle=null;

function showPopUp(value,evt)
{
 evt = evt ? evt : window.event;
 var left=evt.clientX;
 var top=evt.clientY;

 popUpEle = document.getElementById('popup');
 if(popUpEle)
 {
  closePopUp();
  var url= "http://www."+value+".com";  
  document.getElementById('Page_View').src=url;

  popUpEle.style.left=left;
  popUpEle.style.top=top;
  popUpEle.style.filter="revealTrans( transition=1, duration=1)";
  popUpEle.filters.revealTrans( transition=1, duration=1).Apply();
  popUpEle.filters.revealTrans( transition=1, duration=1).Play();
  popUpEle.style.display="inline";
 }
}
function closePopUp(){
 if(popUpEle)
 {
  popUpEle.style.filter="revealTrans( transition=0, duration=4)";
  popUpEle.filters.revealTrans( transition=0, duration=5).Apply();
  popUpEle.filters.revealTrans( transition=0, duration=5).Play();
  popUpEle.style.display="none";

 }
}

  var dragApproved=false;
  var DragHandler = {

    // private property.
    _oElem : null,

    // public method. Attach drag handler to an element.
    attach : function(oElem) {
        oElem.onmousedown = DragHandler._dragBegin;
        // callbacks
        oElem.dragBegin = new Function();
        oElem.drag = new Function();
        oElem.dragEnd = new Function();
        return oElem;
    },
    // private method. Begin drag process.
    _dragBegin : function(e) {

        var oElem = DragHandler._oElem = this;

        if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;

       if (e.pageX || e.pageY) 
       {
        oElem.mouseX = e.pageX;
        oElem.mouseY = e.pageY;
       }
       else if (e.clientX || e.clientY)     {
        oElem.mouseX = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
        oElem.mouseY = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
       }

        document.onmousemove = DragHandler._drag;
        document.onmouseup = DragHandler._dragEnd;  
        return false;
    },
    // private method. Drag (move) element.
    _drag : function(e) {

        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;

       var clientXTmp,clientYTmp;
       if (e.pageX || e.pageY) 
       {
        clientXTmp = e.pageX;
        clientXTmp = e.pageY;
       }
       else if (e.clientX || e.clientY)     {
        clientXTmp = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
        clientYTmp = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
       }

        var tmpX = x + (clientXTmp - oElem.mouseX);
        var tmpY = y + (clientYTmp - oElem.mouseY);

        if(tmpX<=0){tmpX = 0;}
        if(tmpY<=0){tmpY = 0;}

        oElem.style.left = tmpX + 'px';
        oElem.style.top  = tmpY + 'px';

        oElem.mouseX = clientXTmp;
        oElem.mouseY = clientYTmp;
        return false;

    },
    // private method. Stop drag process.
    _dragEnd : function() 
     {
        var oElem = DragHandler._oElem;
        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem = null;
    }
}
DragHandler.attach(document.getElementById('popup'));</script>

</HTML>

Answer 1

首先，你的脚本在firefox或chrome中不起作用，所以我做了一些改动。其次，在iframe上快速移动鼠标时存在一个限制。似乎当鼠标悬停在iframe上时，“mousemove”事件不会被触发。

我在您的代码中插入了一些修复程序，这里是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
    body
    {
        margin: 0px;
        padding: 0px;
    }
    iframe
    {
        width: 800px;
        height: 500px;
    }
    img
    {
        border: none;
    }

    .parentDisabled
    {
        width: 100%;
        height: 100% background-color:red;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border: 1px solid blue;
    }
    #popup
    {
        position: absolute;
        width: 800px;
        height: 500px;
        border: 2px solid #999188;
        display: none;
    }

    #header
    {
        padding-right: 0px;
        width: 800px;
        height:20px;
        background:#d8d8d8;
        cursor:move;
    }

    #close
    {
        cursor: hand;
        width: 15px;
        position: absolute;
        right: 0;
        top: 0;
        padding: 2px 2px 0px 0px;
    }

    #move
    {
        cursor: move;
        background: #999188;
        width: 800px;
        line-height: 10px;
    }

    #container
    {
    }
    .navigate
    {
        border: 1px solid black;
        background: #CC00FF;
        color: white;
        padding: 5px;
        cursor: hand;
        font-weight: bold;
        width: 150px;
    }
</style>
</head>
<body>
     <div onclick="showPopUp('w3schools', event);" class="navigate">
    W3Schools</div>
<div onclick="showPopUp('yahoo', event);" class="navigate">
    Yahoo</div>
<div onclick="showPopUp('linkedin', event);" class="navigate">
    LinkedIn</div>
<div onclick="showPopUp('vistex', event);" class="navigate">
    Vistex</div>
<div id="popup">
    <div id="header">
        <span id="move"></span><span id="close">
            <img src="close_red.gif" onclick="closePopUp()" alt="Close" /></span>
    </div>
    <div id="container">
        <iframe name="frame" id="Page_View" frameborder="0">page cannot be displayed </iframe>
    </div>
</div>

<div id='log'></div>
<script type="text/javascript">

var popUpEle = null;
var isIE = navigator.appVersion.indexOf("MSIE") !== -1;

function showPopUp(value, evt)
{
    evt = evt ? evt : window.event;
    var left = evt.clientX;
    var top = evt.clientY;

    popUpEle = document.getElementById('popup');
    if (popUpEle)
    {
        closePopUp();
        var url = "http://www." + value + ".com";
        document.getElementById('Page_View').src = url;

        popUpEle.style.left = left;
        popUpEle.style.top = top;
        popUpEle.style.filter = "revealTrans( transition=1, duration=1)";
        if (isIE)
        {
            popUpEle.filters.revealTrans(transition = 1, duration = 1).Apply();
            popUpEle.filters.revealTrans(transition = 1, duration = 1).Play();
        }
        popUpEle.style.display = "block";
    }
}
function closePopUp()
{
    if (popUpEle)
    {
        popUpEle.style.filter = "revealTrans( transition=0, duration=4)";
        if (isIE)
        {
            popUpEle.filters.revealTrans(transition = 0, duration = 5).Apply();
            popUpEle.filters.revealTrans(transition = 0, duration = 5).Play();
        }
        popUpEle.style.display = "none";

    }
}

var DragHandler = {

    // private property.
    _oElem: null,

    _dragElement: null,

    // public method. Attach drag handler to an element.
    attach: function (oElem)
    {
        oElem.onmousedown = DragHandler._dragBegin;
        // callbacks
        oElem.dragBegin = new Function();
        oElem.drag = new Function();
        oElem.dragEnd = new Function();
        return oElem;
    },
    // private method. Begin drag process.
    _dragBegin: function (e)
    {
        e = window.event || e;
        var oElem = DragHandler._oElem = this;


        // saving current mouse position
        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;


        //            if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
        //            if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

        //            var x = parseInt(oElem.style.left);
        //            var y = parseInt(oElem.style.top);

        //            e = e ? e : window.event;

        //            if (e.pageX || e.pageY)
        //            {
        //                oElem.mouseX = e.pageX;
        //                oElem.mouseY = e.pageY;
        //            }
        //            else if (e.clientX || e.clientY)
        //            {
        //                oElem.mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        //                oElem.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        //            }

        // saving the element which invoked the drag
        // to capture 'mouseout' event
        DragHandler._dragElement = document.elementFromPoint(e.clientX, e.clientY);
        DragHandler._dragElement.onmouseout = DragHandler._dragMouseOut;

        document.onmousemove = DragHandler._drag;
        document.onmouseup = DragHandler._dragEnd;
        return false;
    },

    _dragMouseOut: function (e)
    {
        e = window.event || e;

        //document.getElementById("log").innerHTML += "mouseout!: " + e.clientX + "," + e.clientY + "<br/>";

        // calculating move by
        var oElem = DragHandler._oElem;
        var moveByX = e.clientX - oElem.mouseX;
        var moveByY = e.clientY - oElem.mouseY;

        //if (document.getElementById("log").offsetHeight > 100)
            //document.getElementById("log").innerHTML = "";
        document.getElementById("log").innerHTML += "mouseout x: " + moveByX + ", y:" + moveByY + "<br/>";

        // setting position
        var futureX = (x + moveByX);
        if (futureX < 0) futureX = 0;
        var futureY = (y + moveByY);
        if (futureY < 0) futureY = 0;
        oElem.style.left = futureX + 'px';
        oElem.style.top = futureY + 'px';

        oElem.mouseX = e.clientX;
        if (oElem.mouseX < 0) oElem.mouseX = 0;
        oElem.mouseY = e.clientY;
        if (oElem.mouseY < 0) oElem.mouseY = 0;
    },

    // private method. Drag (move) element.
    _drag: function (e)
    {
        e = window.event || e;
        var oElem = DragHandler._oElem;
        document.getElementById("log").innerHTML += "mousemove!!!<br/>";

        // current element position
        var x = oElem.offsetLeft;
        var y = oElem.offsetTop;

        // calculating move by
        var moveByX = e.clientX - oElem.mouseX;
        var moveByY = e.clientY - oElem.mouseY;

        //if (document.getElementById("log").offsetHeight > 100)
            //document.getElementById("log").innerHTML = "";
        document.getElementById("log").innerHTML += "mouse move x: " + moveByX + ", y:" + moveByY + "<br/>";

        // setting position
        var futureX = (x + moveByX);
        if (futureX < 0) futureX = 0;
        var futureY = (y + moveByY);
        if (futureY < 0) futureY = 0;
        oElem.style.left = futureX + 'px';
        oElem.style.top = futureY + 'px';

        oElem.mouseX = e.clientX;
        if (oElem.mouseX < 0) oElem.mouseX = 0;
        oElem.mouseY = e.clientY;
        if (oElem.mouseY < 0) oElem.mouseY = 0;

        // canceling selection
        if (!isIE)
            return false;
        else
            document.selection.empty();

    },
    // private method. Stop drag process.
    _dragEnd: function ()
    {
        var oElem = DragHandler._oElem;
        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem = null;

        DragHandler._dragElement.onmouseout = null;
        DragHandler._dragElement = null;
    }
}
   DragHandler.attach(document.getElementById('popup'));
   </script>
       </body></html>

Answer 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
    body
    {
        margin: 0px;
        padding: 0px;
    }
    iframe
    {
        width: 400px;
        height: 200px;
    }
    img
    {
        border: none;
    }

    .parentDisabled
    {
        width: 100%;
        height: 100% background-color:red;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border: 1px solid blue;
    }
    #popup
    {
        position: absolute;
        width: 400px;
        height: 200px;
        border: 2px solid #999188;
        display: none;
    }

    #header
    {
        padding-right: 0px;
        width: 400px;
        height:20px;
        background:#d8d8d8;
        cursor:move;
    }

    #close
    {
        cursor: hand;
        width: 15px;
        position: absolute;
        right: 0;
        top: 0;
        padding: 2px 2px 0px 0px;
    }

    #move
    {
        cursor: move;
        background: #999188;
        width: 400px;
        line-height: 10px;
    }

    #container
    {
    }
    .navigate
    {
        border: 1px solid black;
        background: #CC00FF;
        color: white;
        padding: 5px;
        cursor: hand;
        font-weight: bold;
        width: 150px;
    }
</style>
</head>
<body>
     <div onclick="showPopUp('w3schools', event);" class="navigate">
    W3Schools</div>
<div onclick="showPopUp('yahoo', event);" class="navigate">
    Yahoo</div>
<div onclick="showPopUp('linkedin', event);" class="navigate">
    LinkedIn</div>
<div onclick="showPopUp('vistex', event);" class="navigate">
    Vistex</div>
<div id="popup">
    <div id="header">
        <span id="move"></span><span id="close">
            <img src="close_red.gif" onclick="closePopUp()" alt="Close" /></span>
    </div>
    <div id="container">
        <iframe name="frame" id="Page_View" frameborder="0">page cannot be displayed </iframe>
    </div>
</div>

<div id='log'></div>

</body>
<script>
var popUpEle = null;
var isIE = navigator.appVersion.indexOf("MSIE") !== -1;

function showPopUp(value, evt)
{
    evt = evt ? evt : window.event;
    var left = evt.clientX;
    var top = evt.clientY;

    popUpEle = document.getElementById('popup');
    if (popUpEle)
    {
        closePopUp();
        var url = "http://www." + value + ".com";
        document.getElementById('Page_View').src = url;

        popUpEle.style.left = left;
        popUpEle.style.top = top;
        popUpEle.style.filter = "revealTrans( transition=1, duration=1)";
        if (isIE)
        {
            popUpEle.filters.revealTrans(transition = 1, duration = 1).Apply();
            popUpEle.filters.revealTrans(transition = 1, duration = 1).Play();
        }
        popUpEle.style.display = "block";
    }
}
function closePopUp()
{
    if (popUpEle)
    {
        popUpEle.style.filter = "revealTrans( transition=0, duration=4)";
        if (isIE)
        {
            popUpEle.filters.revealTrans(transition = 0, duration = 5).Apply();
            popUpEle.filters.revealTrans(transition = 0, duration = 5).Play();
        }
        popUpEle.style.display = "none";

    }
}

var dragApproved=false;
var DragHandler = {

    // private property.
    _oElem : null,

    // public method. Attach drag handler to an element.
    attach : function(oElem) {
        oElem.onmousedown = DragHandler._dragBegin;
        // callbacks
        oElem.dragBegin = new Function();
        oElem.drag = new Function();
        oElem.dragEnd = new Function();
        return oElem;
    },

    // private method. Begin drag process.
    _dragBegin : function(e) {

       if (!document.all)return;

        var oElem = DragHandler._oElem = this;

        if (isNaN(parseInt(oElem.style.left))){ oElem.style.left = '0px'; }
        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;

       if (e.pageX || e.pageY) 
       {
        oElem.mouseX = e.pageX;
        oElem.mouseY = e.pageY;
       }
       else if (e.clientX || e.clientY)     {
        oElem.mouseX = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
        oElem.mouseY = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
       }
        document.onmousemove = DragHandler._drag;
        dragApproved=true;
        document.onmouseup = DragHandler._dragEnd;  
        return false;
    },

    // private method. Drag (move) element.
    _drag : function(e) {

     if(dragApproved && event.button==1)
      {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;

       var clientXTmp,clientYTmp;
       if (e.pageX || e.pageY) 
       {
        clientXTmp = e.pageX;
        clientXTmp = e.pageY;
       }
       else if (e.clientX || e.clientY)     {
        clientXTmp = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
        clientYTmp = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
       }

        var tmpX = x + (clientXTmp - oElem.mouseX);
        var tmpY = y + (clientYTmp - oElem.mouseY);

        if(tmpX<=0){tmpX = 0;}
        if(tmpY<=0){tmpY = 0;}
        //Avoiding scrolling of rigth and bottom of the window
        if((tmpX+oElem.offsetWidth) > document.body.offsetWidth)
          {
            tmpX= document.body.offsetWidth-oElem.offsetWidth;
          }
         if((tmpY+oElem.offsetHeight) > document.body.offsetHeight)
          {
            tmpY= document.body.offsetHeight-oElem.offsetHeight;
          }

        oElem.style.left = tmpX + 'px';
        oElem.style.top  = tmpY + 'px';

        oElem.mouseX = clientXTmp;
        oElem.mouseY = clientYTmp;
        return false;
     }
    },

    // private method. Stop drag process.
    _dragEnd : function() 
     {
        dragApproved=false;
        var oElem = DragHandler._oElem;
        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem = null;
    }
}

 DragHandler.attach(document.getElementById('popup'));
</script>
</HTML>

javascript拖放时出错

2 个答案: