当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 让元素在网页中可拖动示例代码

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

2018年04月13日  | 移动技术网IT编程  | 我要评论

1.导入相应的JS类库:

. 代码如下:


<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


2.带有id的p元素:

. 代码如下:


<p id="draggable">
<p>Drag me around!</p>
</p>


3:设置p的样式:

. 代码如下:


#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}


4:让元素可拖动：

. 代码如下:


<script>
$(function() {
$('#draggable').draggable();
});
</script>


效果请点击：https://jsfiddle.net/tounaobun/KS8JC/
源代码：

. 代码如下:


<!-- import the necessary files -->
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://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>
<p id="draggable">
<p>Drag me around!</p>
</p>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网