关于拖动层过程中,使用滚轮的问题

Question

最近在网上发现一个关于拖动层的例子,相信大家也都看过,内容大概如下:
<script type="text/javascript">
var i=0;
var $=function(id){return document.getElementById(id)};
Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag()
{
var A,B;
var zIndex=1;     ........
     ........
}
.............
在这个例子中,当使用层拖动时,若此时存在滚动条,那么当使用鼠标滚轮时,仍可以实现拖动,即当滚动时,层仍跟随鼠标当前位置,因为在滚动时,鼠标位置是不变的.
而且使用另外一个较简单的例子:
<script type="text/javascript">    
var i=0;
function beginDrag(elementToDrag,event)  { //计算元素原左上角与鼠标的距离
var delatX=event.clientX-parseInt(elementToDrag.style.left);
var delatY=event.clientY-parseInt(elementToDrag.style.top); //注册响应mousemove和mousedown事件后的mouseup事件的处理程序 if(document.addEventListener) 
{   //2级DOM事件模型
    document.addEventListener("mousemove",moveHandler,true);
    document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{   //IE5+ 的事件模型
    document.attachEvent("onmousemove",moveHandler);
    document.attachEvent("onmouseup",upHandler);
    G=function(){return false};
    document.attachEvent("ondragstart",G);     
}
else
{   //IE4事件模型
    var oldmovehandler=document.onmousemove;
    var olduphandler=document.onmouseup;
    document.onmousemove=moveHandler;
    document.onmouseup=upHandler;
}
elementToDrag.style.zIndex=2; //我们处理了该事件,不要再让其他元素看见.
if(event.stopPropagation) 
    event.stopPropagation(); //2 级DOM
else 
    event.cancelBubble=true; //IE

//下面禁止执行默认动作
if(event.preventDefault) 
    event.preventDefault();  //2级DOM
else 
//     event.returnValue=false; //IE /*  这是元素被拖动时捕捉mousemove事件的处理程序.
 *  它负责移动元素
 */
function moveHandler(e)  
{
    if(!e) e=window.event;     
    elementToDrag.style.left=(e.clientX-delatX)+"px";
    elementToDrag.style.top=(e.clientY-delatY)+"px";
    //不要再让其他元素看到该事件.
    if(e.stopPropagation) 
        e.stopPropagation();  //2级DOM
    else 
        e.cancelBubble=true; //IE
} /*  这是捕捉拖移结束最后发生的mouseup事件的处理程序.
 */
function upHandler(e)
{
    if(!e) e=window.event; //IE事件模型.
    if(document.removeEventListener) 
    { //DOM事件模型
        document.removeEventListener("mouseup",upHandler,true);
        document.removeEventListener("mousemove",moveHandler,true);
    }
    else 
    if(document.detachEvent) 
    { //IE5+ 事件模型                                 //先从当前事件元素开始一直向外冒
        document.detachEvent("onmouseup",upHandler);
        document.detachEvent("onmousemove",moveHandler);
    }
    else  
    { //IE事件模型
        document.onmouseup=olduphandler;
        document.onousemove=oldmovehandler;
    }
    //不要再让事件进一步传播.
    if(e.stopPropagation) e.stopPropagation();  //2级DOM
    else e.cancelBubble=true; //IE
    } }</script>
这个简单例子中使用如下:
<div id="OperDiv" style="BORDER-RIGHT: #ff3366 1px solid; PADDING-RIGHT: 4px;  
     BORDER-BOTTOM: #ff3366 1px solid; POSITION: absolute;      
      TOP: 25px; HEIGHT: 200px; BACKGROUND-COLOR: #cc99cc" onmousedown="beginDrag(this,event)">
</div>
但是确不能实现滚动时仍有拖动
请大家帮忙看下,谢谢谢谢

Answer 1

直接通过onmousewheel绑定:
document.attachEvent("onmousewheel",moveHandler); 

Answer 2

现在的问题是第一个例子中没有使用onmousewheel之类的方法，即可以实现功能。为何
当页面滚动时是不是还有其它什么事件发生

Answer 3

不太懂你的意思
给你个例子：DragClass.js/*
Auth: jingliangliang
Date: 2007-5-5
Email: [email protected]
*/
(function(){
if(typeof Drag != "undefined")
{
var _Drag = Drag;
}
//此处声明Drag类
//--elementid:要移动元素的ID
var Drag = window.Drag = function(elementid){
var thisDrag = this;
this.DifWidth = 0;
this.DifHeight = 0;
this.thisDivDrag = document.getElementById(elementid);
this.thisDivDrag.onmousedown = function(event){
var theevent;
var theSrcevent;
if(window.event)
{
theevent = window.event;
theSrcevent = window.event.srcElement;
}
else
{
theevent =event;
theSrcevent =event.target;
}
thisDrag.DifWidth= theevent.clientX - theSrcevent.offsetLeft;
thisDrag.DifHeight = theevent.clientY - theSrcevent.offsetTop;
document.body.onmousemove =function(event){
var theevent;
if(window.event)
{
theevent = window.event;
}
else
{
theevent =event;
}
thisDrag.thisDivDrag.style.left = theevent.clientX -thisDrag.DifWidth ;
thisDrag.thisDivDrag.style.top = theevent.clientY -thisDrag.DifHeight ;
};
document.body.onmouseup =function(event)
{
document.body.onmousemove = "";
};
};
};
})();
调用 <HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript" src="DragClass.js"></script>
  <script type="text/javascript">
window.onload=function(){
__Drag = new Drag("div1");
};
  </script>
 </HEAD> <BODY>
  <div id="div1" style="background-color:red;width:100px;height:100px;border:1px solid #666666;position: absolute;">test</div>
 </BODY>
</HTML>

Answer 4

<!--JS控制鼠标滚轮-->
<style>
body{width:120%}
</style>
  <script type="text/javascript">
  //<![CDATA[
function handle(delta) {
 var s = delta + ": ";
 if (delta < 0)
  s += "down";
 else
  s += "up";
 document.getElementById(&apos;delta&apos;).innerHTML = s;
}function wheel(event){
 var delta = 0;
 if (!event) event = window.event;
 if (event.wheelDelta) {
  delta = event.wheelDelta/120; 
  if (window.opera) delta = -delta;
 } else if (event.detail) {
  delta = -event.detail/3;
 }
 if (delta)
  handle(delta);//禁用滚轮只需return false;
}/* Initialization code. */
if (window.addEventListener)
 window.addEventListener(&apos;DOMMouseScroll&apos;, wheel, false);
window.onmousewheel = document.onmousewheel = wheel;  //]]>
  </script>
  <body>
<div id="delta">动一动滚轮试试。.</div>
<div>
<br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<span style="width:2000px">yagebu</span>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</div></body>给你个例子看看

Answer 5

十分感谢大家的回答,可能是我没有说清楚.在function divDrag() 代码中(这个代码网上有),页面有垂直滚动条,使用鼠标左键按下拖动,鼠标仍然按住,使用鼠标滚轮滚动页面,拖动层仍会跟着移动(就是拖动层仍跟随鼠标当前位置,因为在滚动时,鼠标位置是不变的.)但在function beginDrag(elementToDrag,event)  这个较简单例子中使用如上操作时出现:
鼠标位置不变,但拖动层随页面滚动方向移动了.我的问题是为什么 function divDrag() 代码会实现那样的效果,没发现其代码中有什么特殊处理的地方.不同说明白没有.如果没有说明白我再接着说

Answer 6

liangtuhua19851103：
如果得到解决，请告诉我，好兄弟

Answer 7

给你举一个例子:var isdrag=false;
var x,y;
var objScroll;
var objContainer;
var handle;
var moveHeight;function upScroll(objScrollId,objContainerId,stepHeight){
objScroll = document.getElementById(objScrollId);
objContainer = document.getElementById(objContainerId);
moveHeight = stepHeight;
if(objContainer.children.length>=1){
handle = setInterval('upContainer()',50);
document.onmouseup=stopScroll;
}
}function downScroll(objScrollId,objContainerId,stepHeight){
objScroll = document.getElementById(objScrollId);
objContainer = document.getElementById(objContainerId);
//alert(objContainer.outerHTML);
moveHeight = stepHeight;
if(objContainer.children.length>=1){
handle = setInterval('downContainer()',50);
document.onmouseup=stopScroll;
}
}function stopScroll(){
clearInterval(handle);
}function upContainer(){
objContainer.scrollTop = objContainer.scrollTop - moveHeight;
var containerHeight = objContainer.children(0).offsetHeight - objContainer.clientHeight;
if(objContainer.scrollTop <0) objContainer.scrollTop = 0;
if(objContainer.scrollTop >containerHeight) objContainer.scrollTop = containerHeight;
ContainerToScroll();
}function downContainer(){
objContainer.scrollTop = objContainer.scrollTop + moveHeight;
var containerHeight = objContainer.children(0).offsetHeight - objContainer.clientHeight;
if(objContainer.scrollTop <0) objContainer.scrollTop = 0;
if(objContainer.scrollTop >containerHeight) objContainer.scrollTop = containerHeight;
ContainerToScroll();
}function ScrollToContainer(){
var parTD = objScroll.parentElement;
var scrollHeight = parTD.clientHeight - objScroll.clientHeight;
var containerHeight = objContainer.children(0).offsetHeight - objContainer.clientHeight;
if(containerHeight<=0) containerHeight=0;
var heightPercent = parseFloat(objScroll.style.top)/parseFloat(scrollHeight);
objContainer.scrollTop = parseInt(containerHeight*heightPercent);
}function ContainerToScroll(){
var parTD = objScroll.parentElement;
var scrollHeight = parTD.clientHeight - objScroll.clientHeight;
var containerHeight = objContainer.children(0).offsetHeight - objContainer.clientHeight;
var heightPercent = parseFloat(objContainer.scrollTop)/parseFloat(containerHeight);
if(containerHeight<=0) heightPercent=0;
objScroll.style.top = parseInt(scrollHeight*heightPercent);
}
function movemouse(){
if (isdrag){
var parTD = objScroll.parentElement;
var left = tx + event.clientX - x;
var top  = ty + event.clientY - y;
left = left > 0 ? left : 0;
top = top > 0 ? top : 0;
left = left < parTD.clientWidth - objScroll.clientWidth ? left : parTD.clientWidth - objScroll.clientWidth ;
top = top < parTD.clientHeight - objScroll.clientHeight ? top : parTD.clientHeight - objScroll.clientHeight;
objScroll.style.top = top;
objScroll.style.left = left;
if(objContainer.children.length>=1){
ScrollToContainer();
}
return false;
}
}function selectmouse(){
var fobj  = event.srcElement;
while (fobj.tagName!= "BODY" && fobj.tagName!= "HTML" && fobj.className != "handleImg"){
fobj = fobj.parentElement;
}
if(fobj.className=="handleImg"){
isdrag = true;
objScroll = fobj;
objContainer = document.getElementById(objScroll.target);
objScroll = fobj;
tx = parseInt(objScroll.style.left+0);
ty = parseInt(objScroll.style.top+0);
x = event.clientX;
y = event.clientY;
document.onmousemove=movemouse;
document.onmouseup=upmouse;
return false;
}
}function upmouse(){
isdrag=false;
}
 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
    var arVersion = navigator.appVersion.split("MSIE") 
    var version = parseFloat(arVersion[1]) 
    if ((version >= 5.5) && (document.body.filters)) 
    { 
       for(var j=0; j<document.images.length; j++) 
       { 
          var img = document.images[j] 
          var imgName = img.src.toUpperCase() 
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
          { 
             var imgID = (img.id) ? "id='" + img.id + "' " : "" 
             var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
             var imgStyle = "display:inline-block;" + img.style.cssText 
             if (img.align == "left") imgStyle = "float:left;" + imgStyle 
             if (img.align == "right") imgStyle = "float:right;" + imgStyle 
             if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
             var strNewHTML = "<span " + imgID + imgClass + imgTitle 
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
             img.outerHTML = strNewHTML 
             j = j-1 
          } 
       } 
    }     
} 
 <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
                     <tr>
                     <td > <div class="Container" id="oHTML" style=" height:373px"></div></td>
                     <td width="10px" align="right">
  <table width="10px" border="0"  height="370px" cellpadding="0" cellspacing="0" background="/SXPortal/images/line.jpg">
    <tr><td  valign="top"><img width="10px" height="12px" src="/SXPortal/images/arrow1.jpg" style="cursor:pointer" onMouseDown="upScroll('scroll2','oHTML',12);" onMouseOut="stopScroll()"/></td></tr>
<tr><td height="350" valign="top">
  <img width="10px" height="4px" src="/SXPortal/images/huakuai.jpg" class="handleImg" id="scroll2" target="oHTML" onMouseDown="selectmouse()"/></td></tr>
<tr><td  valign="bottom"><img width="10px" height="12px" src="/SXPortal/images/arrow2.jpg" style="cursor:pointer" onMouseDown="downScroll('scroll2','oHTML',12);" onMouseOut="stopScroll()"/></td></tr>
  </table>
   </td>
                     </tr>
                    </table>