美文网首页
jQuery UI插件draggable

jQuery UI插件draggable

作者: 你说我的笑绽放在过去 | 来源:发表于2017-12-09 17:51 被阅读0次

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

$(selector). draggable({options})

options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。

例如,在页面中的<div>元素中添加两个子类<div>,通过与拖曳插件绑定,这两个子类<div>元素只能在外层的父<div>元素中任意拖曳.

<body> <div id="divtest"> <div class="drag">任意拖拽A</div> <div class="drag">任意拖拽B</div> </div> <script type="text/javascript"> $(fuction(){ $(".drag").draggable({containment:"parent"}); }); </script> </body>

由于使用jQuery UI插件draggable绑定了两个子类<div>元素,并将配置对象的“containment”属性值设为“parent”,因此,这两个子类<div>元素只能在外层的父框中实现任意拖曳。

相关文章

网友评论

      本文标题:jQuery UI插件draggable

      本文链接:https://www.haomeiwen.com/subject/rokpixtx.html