Question

我创建了一个可拖动的div窗口，并创建了一个可滚动的子div（在窗口div中）。可以单独工作，但是当我尝试通过单击上下滚动内部div滚动箭头，一旦滚动完成就会触发拖动事件。我无法解决问题....有任何建议请...

这是代码......

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> Reporting</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    body{
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.7em;
    }
    .Object{
    width:190px;
    height:100px;
    border:1px solid black;
    border-radius:7px 7px 7px 7px;
    box-shadow:3px 3px 2px #D2D2D2;
    position:absolute;
    resize:
    }

    .ObjHdr{
     color:#fff;
     background:#363636; 
     padding:3px 0px 3px 7px;
     border-radius:6px 6px 0px 0px;;
     font-weight:bold;
     cursor:move;
    }

    .ObjBody{
     width:190px;
     height:77px;
     overflow:scroll;
    }

    .ObjEle{
     padding:1px 0px 1px 4px;
     color:#000;
     border-bottom:1px solid black;
     cursor:pointer;
    }

    </style>

    </HEAD>
    <BODY>

     <div id="ObjCountry" class="Object">
       <div class="ObjHdr">Country</div>
       <div id =sd class="ObjBody" unselectable="on">
        <div class="ObjEle">India</div>
        <div class="ObjEle">China</div>
        <div class="ObjEle">USA</div>
        <div class="ObjEle">Iran</div>
        <div class="ObjEle">Iraq</div>
        <div class="ObjEle">Indonesia</div>
       </div>
     </div>

    </BODY>
    </HTML>

    <script>

    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;
            oElem.mouseX = e.clientX;
            oElem.mouseY = e.clientY;

            oElem.dragBegin(oElem,x,y);

            //document.onmousemove = DragHandler._drag;
            document.onmouseup = DragHandler._dragEnd;
            oElem.onmousemove = DragHandler._drag;
            oElem.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 tmpX = x + (e.clientX - oElem.mouseX);
            var tmpY = y + (e.clientY - oElem.mouseY);

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


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

            oElem.mouseX = e.clientX;
            oElem.mouseY = e.clientY;

            oElem.drag(oElem, x,y);

            return false;
        },

        // private method. Stop drag process.
        _dragEnd : function() {
            var oElem = DragHandler._oElem;

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

            oElem.dragEnd(oElem, x, y);

            oElem.onmousemove = null;
            oElem.onmouseup = null;
            document.onmousemove=null;
            document.onmouseup=null;
            DragHandler._oElem = null;

        }

    }

    DragHandler.attach(document.getElementById('ObjCountry'));

    </script>

Answer 1

我会这样做：

- 在draghandler中创建一个新方法，它只调用dragend私有方法 - 创建一个mousedown事件到id =“ObjHdr” - 它开始拖动 - 创建一个mouseup事件到id =“ObjHdr” - 它结束拖动

进入draghandler： detach：function（oElem）{oElem.onmousedown = DragHandler._dragEnd;返回oElem; }，

的document.getElementById（ “ObjHdr”）onmousedown事件= “DragHandler.attach（的document.getElementById（” ObjCountry “））;”。的document.getElementById（ “ObjHdr”）onmouseup = “DragHandler.detach（的document.getElementById（” ObjCountry。 “））;”

结果：只有单击标题并在mouseup结束时才会启动拖放事件。如果您尝试单击“ObjBody”，则不执行任何操作 - 不会启动任何拖动过程..

问候 Ozsi

Answer 2

这是因为，拖动适用于整个div，包括滚动条。因为它是在mousedown上调用的，所以在点击滚动条时也会调用它。

DIV标记滚动时出错

2 个答案: