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

146 阅读 0 评论 97 点赞

我是靠谱客的博主淡定书本，最近开发中收集的这篇文章主要介绍让元素在网页中可拖动示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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> 