通过使用鼠标拖动来滚动文本

Question

我正在尝试创建具有特定宽度和高度的文本块。如果文本超出宽度和高度，我希望能够拖动文本并显示其余内容。 （按下文本并向左或向右移动文本）。当我现在这样做时，它选择文本而不是拖动它。我已经看到一些网站使用flash做到这一点，但是使用CSS或jQuery做一些更简单的方法。

Answer 1

在这里，您可以使用Jquery UI draggable（）来拖动文本

HTML

<div id="container">
         <p>
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod                                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
     </div>

CSS

          div{

               width:150px;
               height:150px;
               overflow:hidden;
               border:1px solid grey;

             }

Jquery的 -

                var o = document.getElementById("container");

                if (o.offsetHeight < o.scrollHeight) {

                   $('p').on('click',function(){
                   $(this).css("cursor","move");
                   $(this).draggable();
                   });

                 }

Check the Fiddle Here

Answer 2

我会看一下移动javascript框架，例如KendoUI，jQuery Mobile等。

另一个选择是在文本顶部放置一个div并使其成为可拖动的。