具体用法
1、需要加载的JS ,jquery 需要在jquery-ui之前
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
2、页面上的HTML
(1)拖动的element
//可以是任何html元素,一个图片,一个div,或者一个 A 标签
<div id="draggable" class="ui-widget-content">
<p> 这是一个可以拖动的元素--from ifxoxo.com</p>
</div>
(2) 如果需要指定放下到哪里,则需要写一个接受的元素
//下面是一个DIV
<div id="droppable" class="ui-widget-header">
<p>可以拖动到这里来 -- from ifxoxo.com</p>
</div>
3、主要的JS代码
(1)初始化draggable(可拖动)
draggable()函数有许多参数和用法,详见二、4
// 初始化#draggable 可以被拖动
$( "#draggable" ).draggable({
//这里是一些参数
});
(2)初始化#droppable,当有东西丢下时,执行
droppable()函数有许多参数和用法(详见二、5)
$( "#droppable" ).droppable({
drop: function( event, ui ) {
alert("has drop!--from ifxoxo.com");
}
});
4、draggable()函数的其他参数
(1)回调函数
有start, stop, drag等事件,这些函数都接受两个参数:event和ui。
start: 拖动开始, 指鼠标按下, 开始移动.
drag: 拖动过程中鼠标移动.
stop: 拖动结束.
//初始化时设置事件.
$('.selector').draggable({
start: function(event, ui){ alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});
(2)常见参数
addClasses: [类型]Boolean(布尔值) [默认值]true
是否给draggable元素增加 ui-draggable这个css的class
axis: [类型]String [支持] ‘x’, ‘y’, false
控制元素 只能沿 X轴|Y轴 移动
containment:[类型]选择器, 元素, 字符串, 数组
只能在选择器约束的元素内拖动
delay:[类型]整数, 单位是毫秒
可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时
还有:distance,distance,handle,helper,opacity (详见 四、)
$('.selector').draggable({
addClasses: true,
axis: 'x',
containment: 'parent', //parent: 只能在父容器内拖动
delay: 500,
opacity: 0.35, //被拖到时的不透明度
});
5、 droppable()函数的参数
(1)函数
activate:在允许的draggable对象开始拖动时触发.
deactivate:在允许的draggable对象停止拖动时触发.
over:在允许的draggable对象”经过”这个droppable对象时触发
out:在允许的draggable对象离开 这个droppable对象时触发
drop:在允许的draggable对象填充进这个droppable对象时触发.
$('.selector').droppable({
activate: function(event, ui) { ... },
deactivate: function(event, ui) { ... },
over: function(event, ui) { ... },
out: function(event, ui) { ... },
drop: function(event, ui) { ... }
});
(2)常见参数
accept :[类型]Selector, Function [默认值]‘*’
允许被放下来的元素.
hoverClass :[类型]String [默认值]false
一个被允许的draggable对象悬停在droppable对象上时添加的class
还有:activeClass,greedy,scope,tolerance (详见 五、)
$('.selector').droppable({
accept: '#someid',
hoverClass: 'drophover'
});
query ui draggable,droppable
最新推荐文章于 2023-04-07 17:22:39 发布