Existe-t-il un moyen facile de faire défiler en cliquant et en faisant glisser dans les cadres de texte?

Question

J'ai une div avec overflow:auto et une barre de défilement, et je voudrais être en mesure de faire glisser le contenu pour faire défiler. Je n'ai pas besoin de pouvoir sélectionner du texte. Y a-t-il un moyen facile de faire ceci? Un plugin jQuery serait bon, sinon le vieux Javascript serait bien.

Il semble que je ne me sois pas suffisamment expliqué. Il y a un div avec une hauteur fixe que je veux faire défiler. Au lieu de ramasser la barre de défilement, je veux cliquer et glisser à l'intérieur du texte dans la direction opposée. Comme sur un iPhone. Comme dans Photoshop lorsque vous maintenez l'espace et faites glisser.

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

Answer 1

Voici une belle implemenation de glisser et de défilement divs

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

ci-dessous est mon lien d'origine que j'ai posté. On dirait que quelqu'un a édité ma réponse.

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

Answer 2

Voulez-vous dire que le contenu devrait défiler lorsque vous déplacez la barre de défilement?

Faites une nouvelle div pour le contenu que vous voulez faire glisser, et placez-le sur la div que vous faites défiler. vérifier le code donné.

<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> 

puis chargement de la page, vous pouvez rendre le div visible après avoir défini son contenu HTML.

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

où la fonction stripColumnFromDiv met les données de votre élément nouveau vide dragableContent. J'espère que c'est ce que vous voulez, et vous aide.

merci.

Answer 3

Il y a plugin dans Jquery UI appelé draggable par ce que vous pouvez changer tout élément en objet draggable

Voici le lien pour la démo http://jqueryui.com/demos/draggable/

Il est aussi simple que cela

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

Il est également possible de le faire défiler à l'intérieur d'un div. Consultez la page de démonstration