Le déplacement d'un DIV par défilement

Je suis de la création d'un jQuery barre de défilement qui permet de faire défiler le contenu dans un <div>. C'est quelque chose comme jQuery ScrollPane.

J'en suis venu au point où j'ai besoin de déplacer le bouton de défilement. Ma question est: quelle est la meilleure façon de le faire sans UI plugin? Ainsi, lorsque l'utilisateur clique sur le bouton de défilement peut être déplacé verticalement dans son conteneur parent avec un événement mousedown. Comment pourrais-je le faire?

je sais que vous avez écrit, vous ne voulez pas utiliser une interface utilisateur plugin, mais pourquoi? ui-déplaçable semble être exactement ce dont vous auriez besoin? jqueryui.com/demos/draggable/#constrain-movement
C'est une exigence de mon client. Le script doit être un "léger", facilement configurable, script autonome.

OriginalL'auteur | 2011-07-07

  1. 6

    J'ai développé un droit nav quai élément de style avec juste du pur javascript.
    Voici le lien:

    https://github.com/developerDoug/HtmlJavascriptDockInVS2010

    À l'aide d'une interface utilisateur plugin serait mieux si vous pouvez convaincre votre client de le faire. Si non, ce que vous aurez besoin de se concentrer sur est hanling mousedown ou quelque chose de semblable pour être remarqué que le mouvement a commencé. La il y a des méthodes pour se concentrer sur sont: mousedown, mousemove, mouseup.

    Par exemple, si sur certains div, vous détecter mousedown, vous pouvez appeler une fonction qui, fondamentalement serait votre beginDrag, obtenir x y coordonnées, de conserver une référence pour le début coordonnées, attachEvent (si IE), la méthode addEventListener (pour tous les autres navigateurs).

    ex:

    //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);
}
}
    note: j'ai pris mon exemple, et fait de mon mieux pour l'adapter vers vous exemple. tweaks peut-être nécessaire. 🙂
    +1, puisque le demandeur n'a évidemment pas le même soin assez pour répondre

    OriginalL'auteur developerdoug