Перемещение DIV с помощью прокрутки

Question

Я создаю полосу прокрутки jQuery, которая прокручивает содержимое в

.Это что-то вроде jQuery ScrollPane .

Я дошел до того, что мне нужно переместить кнопку прокрутки.Мой вопрос: каков наилучший способ сделать это без какого-либо плагина пользовательского интерфейса?Поэтому, когда пользователь нажимает кнопку прокрутки, его можно перемещать вертикально в родительском контейнере с событием 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

Лучше всего использовать плагин пользовательского интерфейса, если вы сможете убедить своего клиента сделать это. Если нет, то на чем вам нужно сосредоточиться, так это на маневрировании или на чем-то подобном, чтобы заметить, что движение началось. Существуют следующие методы: 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);
    }
}