What is the simplest way to make something dragable using jQuery?_问答_开发者

What is the simplest way to make something dragable using jQuery?

开发者 https://www.devze.com 2023-03-13 10:34 出处：网络

I have a simple info div, which I want to make dragable across the screen so the user can place it \"out of the way\" depending on what else is on the screen.

I have a simple info div, which I want to make dragable across the screen so the user can place it "out of the way" depending on what else is on the screen.

Looking for a simple solution - don't really want to be dependant on other jquery libr开发者_StackOverflow社区aries - using basic jquery and jquery ui

TRy this:

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

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

Please set this link

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