通过滚动来移动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。 这里是链接：

https://github.com/developerDoug/HtmlJavascriptDockInVS2010

使用UI插件将是最好的，如果你能说服你的客户这样做。如果不是的话，你需要关注的是hanling mousedown或类似的东西，以注意到移动已经开始。那里的方法重点是：mousedown，mousemove，mouseup。例如，如果在某个div上检测到mousedown，则可以调用一个函数，该函数基本上是您的beginDrag，获取xy坐标，保留对起始坐标的引用，attachEvent（如果是IE），addEventListener（对于所有其它浏览器）。

例如：

// 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); 
    } 
}