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

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

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

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

3 ответов


вот хорошая имплементация перетаскивания и прокрутки divs

http://plugins.jquery.com/project/Dragscrollable

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

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


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

сделайте новый 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.

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

спасибо.


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

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

Это просто

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

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