jquery UI 跟随学习笔记——拖拽(Draggable)

javascript cooljun 142℃ 0评论

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)

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址