搜索登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

让元素在网页中可拖动示例代码

作者：Terry2017.02.08来源：Web前端之家浏览：11399评论:0
关键词：JQueryJS
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>

赏您的支持是我们创作的动力！
温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/svg1486483200908.html

网友评论文明上网理性发言已有0人参与

发表评论:

相关文章