スクロールでDIVを移動する

Question

<div>の内容をスクロールするjQueryスクロールバーを作成しています。それはjQuery ScrollPaneのようなものです。

私はスクロールボタンを動かす必要があるところまで来ました。私の質問です：どのUIプラグインなしでそれを行うための最良の方法は何ですか？したがって、ユーザーがスクロールボタンをクリックすると、mousedownイベントで親コンテナ内を垂直に移動できます。どうすればいい？

Answer 1

ここでの出発点だが、それはあなたが後にしている何を望む：

$(function() { 
 
    $('.slider').slider(); 
 
}); 
 

 
$.fn.slider = function() { 
 
    return this.each(function() { 
 
     var $el = $(this); 
 
     $el.css('top', 0); 
 
     var dragging = false; 
 
     var startY = 0; 
 
     var startT = 0; 
 
     $el.mousedown(function(ev) { 
 
      dragging = true; 
 
      startY = ev.clientY; 
 
      startT = $el.css('top'); 
 
     }); 
 
     $(window).mousemove(function(ev) { 
 
      if (dragging) { 
 
       // calculate new top 
 
       var newTop = parseInt(startT) + (ev.clientY - startY); 
 
       
 
       //stay in parent 
 
       var maxTop = $el.parent().height()-$el.height();   
 
       newTop = newTop<0?0:newTop>maxTop?maxTop:newTop; 
 
       $el.css('top', newTop); 
 
      } 
 
     }).mouseup(function() { 
 
      dragging = false; 
 
     }); 
 
    }); 
 
}

.container{ 
 
    position:relative; 
 
    border:1px solid red; 
 
    height:100px; 
 
} 
 
.slider{ 
 
    height:20px; 
 
    width:20px; 
 
    background:green; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="container"> 
 
    <div class="slider" /> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="container"> 
 
    <div class="slider" /> 
 
</div>

Answer 2

私は単なるJavaScriptを使用して、右のnavドックスタイルのアイテムを開発しました。ここ はリンクです：あなたがそうするように、あなたの顧客を説得できるかどうかのUIのプラグインを使用して

https://github.com/developerDoug/HtmlJavascriptDockInVS2010

は最高でしょう。そうでない場合、あなたが集中する必要があるのは、移動が始まったことに気付かれるような、ハング・マウスまたはそれに類似したものです。そこに焦点を当てる方法は：mousedown、mousemove、mouseupです。

たとえば、あるdivでmousedownを検出すると、基本的にbeginDrag、xy座標を取得する関数を呼び出すことができます。開始座標、attachEvent（IEの場合）、addEventListener（all他のブラウザ）。

例：

// keep reference to drag div 
_dragObj = new Object(); 

$("myDragDiv").mousedown(function(e) { 
    dragBegin(e); 
} 

function dragBegin(e) { 

    _dragObj = document.getElementById('myDragDiv'); 

    var x, y; 

    if (navigator.userAgent.indexOf("MSIE") >= 0) { 
     x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; 
     y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; 
    } else { 
     x = e.clientX + window.scrollX; 
     y = e.clientY + window.scrollY; 
    } 

    _dragObj.cursorStartX = x; 
    _dragObj.cursorStartY = y; 

    if (navigator.userAgent.indexOf("MSIE") >= 0) { 
     document.attachEvent("onmousemove", dragContinue); 
     document.attachEvent("onmouseup", dragEnd); 
     window.event.cancelBubble = true; 
     window.event.returnValue = false; 
    } else { 
     document.addEventListener("mousemove", dragContinue, true); 
     document.addEventListener("mouseup", dragEnd, true); 
     e.preventDefault(); 
    } 
} 

function dragContinue(e) { 
    var x, y; 

    var isIE = _browser.isIE; 
    var isWebKitBased = _browser.isWebKitBased; 

    if (navigator.userAgent.indexOf("MSIE") >= 0) { 
     x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; 
     y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; 
    } else { 
     x = e.clientX + window.scrollX; 
     y = e.clientY + window.scrollY; 
    } 

    var distance = x - _dragObj.cursorStartX; 

    distance = Math.abs(distance); 

    // or top, bottom, right 
    _dragObj.elNode.style.left = (_dragObj.elStartLeft + x - _dragObj.cursorStartX) + "px"; 

    if (navigator.userAgent.indexOf("MSIE") >= 0) { 
     window.event.cancelBubble = true; 
     window.event.returnValue = false; 
    } else { 
     e.preventDefault(); 
    } 
} 

function dragEnd() { 
    if (navigator.userAgent.indexOf("MSIE") >= 0) { 
     document.detachEvent("onmousemove", dragContinue); 
     document.detachEvent("onmouseup", dragEnd); 
    } else { 
     document.removeEventListener("mousemove", dragContinue, true); 
     document.removeEventListener("mouseup", dragEnd, true); 
    } 
}