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

时间:2013-08-13    点击:77   
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>
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
javascript 树形导航菜单实例代码
Jquery操作下拉框(DropDownList)实现取值赋值
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
jquery固定底网站底部菜单效果
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved