Существует ли простой способ прокрутки в текстовых фреймах с помощью щелчка и перетаскивания?

Question

У меня есть div с overflow:auto и полоса прокрутки, и я хотел бы иметь возможность перетаскивать содержимое для прокрутки. Мне не нужно иметь возможность выбирать текст. Есть простой способ сделать это? Плагин jQuery был бы хорош, в противном случае старый добрый JavaScript был бы в порядке.

Кажется, я не достаточно ясно выразился. Есть div с фиксированной высотой, который я хочу прокрутить. Вместо того, чтобы поднимать полосу прокрутки, я хочу щелкнуть и перетащить текст внутрь в противоположном направлении. Как на iPhone. Как в Photoshop, когда вы удерживаете пространство и перетаскиваете.

-------------------
|               | |
|               | |
|               |||
|               | |
|         <----------- click here and drag to scroll.
|               | |
|               | |
-------------------

Answer 1

Вот хорошая реализация перетаскивания и прокрутки div https://github.com/mvlandys/jquery.dragscrollable

ниже - моя оригинальная ссылка, которую я разместил. Похоже, кто-то отредактировал мой ответ.

http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html

Answer 2

В Jquery UI есть плагин, называемый draggable. благодаря этому вы можете изменить любой элемент на перетаскиваемый объект

Вот ссылка на демо http://jqueryui.com/demos/draggable/

Это так просто, как этот

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>

Также возможно сделать его прокручиваемым внутри div. Проверьте демонстрационную страницу

Answer 3

Вы имеете в виду, что контент должен прокручиваться при перемещении полосы прокрутки?

Создайте новый div для содержимого, которое вы хотите перетаскивать, и поместите его в div, который вы прокручиваете. проверьте указанный код.

<div style="position:relative; overflow:hidden;">
    <div id="dragableContent"
    style="float: left;display: none;background:none repeat scroll 0 0 white; border:1px solid #323C45; border-width:0px 1px 0px 1px;"></div>
    <div> This is you content div...</div>
</div>

затем при загрузке страницы вы можете сделать div видимым после установки его содержимого HTML.

$(document).ready(function() {
    stripColumnFromDiv('Your content Div ID');
    var scrollingDiv = $("#dragableContent");
    scrollingDiv.css({'position':'absolute','display':'block'});
});

где stripColumnFromDiv функция устанавливает данные из вашего элемента в новое пустое dragableContent.

Я надеюсь, что это то, что вы хотите, и поможет вам.

спасибо.