Question

我有一个简单的信息div，我希望它可以在屏幕上拖动，这样用户可以根据屏幕上的其他内容将其“放在一边”。

寻找一个简单的解决方案 - 不要真的想依赖其他jquery库 - 使用基本的jquery和jquery ui

Answer 1

试试这个：

  <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"                          type="text/javascript"></script> 
        <script   src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
    $( "#draggable" ).draggable();
});
</script>

</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

</div><!-- End demo -->



 <div class="demo-description" style="display: none; ">
 <p>Enable draggable functionality on any DOM element. Move the draggable object by clicking  on it with the mouse and dragging it anywhere within the viewport.</p>
</div><!-- End demo-description -->
</body>
</html>

Answer 2

Jquery UI： http://jqueryui.com/demos/draggable/

Answer 3

请设置此链接

http://jqueryui.com/demos/draggable/


<style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
    $(function() {
        $( "#draggable" ).draggable();
    });
    </script>



<div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div><!-- End demo-description -->

使用jQuery制作可拖动内容的最简单方法是什么？

3 个答案: