1、添加js源文件
<!-- jQuery文件-->
<script src="./js/jquery-1.8.3.min.js"></script>
<!-- jQuery-ui文件-->
<script src="./js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
|
2、
1: <script type=“text/javascript”>
2: $(document).ready(function(){
3: $(".block").draggable({
4: //helper: "clone", //拖动时克隆,默认是 original
5: //axis:"x", //定义拖动方向
6: containment:"#contain", //定义一个容器,div就只能在容器的范围内活动了
7: cursor: "move", //定义拖动时鼠标指针的状态 ，参数类型详见css中cursor配置
8: cursorAt:{top:10}, //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框，单位px
9: opacity: 0.40, //设置对象被拖动时的透明度
10: handle: "div", //设置拖动控制器，也就是说当鼠标按住控制器的时候，才能拖动对象
11: scroll:false, //设置当拖动超出整个浏览器窗口,是否滚动浏览器
12: distance: 20, //设置当鼠标拖动多少像素时对象才会移动
13: //delay: 1000, //设置延迟时间 单位毫秒
14: grid:[50,50], //设置每次拖动的步进 单位px
15: dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止
16: start:function(e,ui){}, //开始拖动执行的函数
17: drag:function(e,ui){}, //拖动时执行的函数
18: stop:function(e,ui){} //拖动停止执行的函数
19: }).resizable();
20:
21: $("#contain").draggable({
22: revert: true, //设置对象被拖动释放后时候回到原始位置
23: helper: "clone"
24: });
25: });
26: </script>
27:
28: <title>jQuery UI -- Draggable</title>
29: </head>
30: <body>
31: <div id="contain">
32: <div class="block">
33: <div class="hendle" style="background: green">handle</div>
34: </div>
35: </div>
转载请注明：cooljun小窝 » jquery UI 跟随学习笔记——拖拽（Draggable）
如果你觉得这篇文章对你有帮助，请支持我继续更新网站 ！捐赠本站
