您的位置：首页 > Web前端 > JQuery

让元素在网页中可拖动

2013-08-12 22:40 274 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery UI draggable jQuery

相关文章推荐

新的分享

章节导航