2012-02-03 2 views
0

ドラッグ可能な1つのdivウィンドウを作成し、スクロール可能な1つの子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> 

答えて

1

が、私はそれを作っただろう。

を-create呼び出すdraghandlerの新しい方法のid =「ObjHdr」にマウスダウンイベントは-createのみdragendイベントプライベートメソッド - それはドラッグを開始 -create A id = "ObjHdr"へのmouseupイベント - ドラッグを終了します。

into draghandler: detach:function(oElem){oElem.onmousedown = DragHandler._dragEnd; return eElem; }、

document.getElementById( "ObjHdr")。onmousedown = "DragHandler.attach(document.getElementById(" ObjCountry "));" ( "ObjHdr")。onmouseup = "DragHandler.detach(document.getElementById(" ObjCountry "));"

結果: ドラッグアンドドロップイベントは、ヘッダーをクリックしてmouseupで終了する場合にのみ開始されます。 アクションなしあなたが「ObjBody」をクリックしよう -

よろしく Ozsi

...何dragprocessが起動しません
0

ドラッグは、スクロールバーを含めdiv全体に適用できるためです。それはmousedown上で呼び出されるので、スクロールバーをクリックしても呼び出されます。次のように

関連する問題