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/

源代码：

复制代码 代码如下:

<>

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