管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　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>

教程首页 更多教程