1.導入相應的JS類庫:
. 代碼如下:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2.帶有id的div元素:
. 代碼如下:
<div id="draggable">
<p>Drag me around!</p>
</div>
3:設置div的樣式:
. 代碼如下:
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
4:讓元素可拖動：
. 代碼如下:
<script>
$(function() {
$('#draggable').draggable();
});
</script>
效果請點擊：http://jsfiddle.net/tounaobun/KS8JC/
源代碼：
. 代碼如下:
<!-- import the necessary files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#draggable').draggable();
});
</script>
<style>
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
</style>
<div id="draggable">
<p>Drag me around!</p>
</div>