让元素在网页中可拖动示例代码
更新时间:2013年08月13日 14:55:35 作者:
让元素可拖动的方法有很多,本文为大家介绍下使用jquery简单实现拖动效果,感兴趣的朋友可以参考下,希望对大家有所帮助
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>
复制代码 代码如下:
<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.cookie() 方法的使用(读取、写入、删除)
jquery.cookie() 方法:一个轻量级的cookie 插件,可以读取、写入、删除 cookie,下面有个不错的数量,大家可以学习下2013-12-12jQuery on()方法绑定动态元素的点击事件实例代码浅析
这篇文章主要介绍了jQuery on()方法绑定动态元素的点击事件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-06-06jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
这篇文章主要介绍了jQuery添加新内容的四个常用方法,结合实例形式分析了jQuery元素添加append,prepend,after,before四种方法的功能与相关使用技巧,需要的朋友可以参考下2019-03-03
最新评论