jquery.ui.droppable中文文档-CSDN博客

XML格式, 便于后期排版方便, 每一部分翻译完成之后, 都会在我的博客和http://www.heyjava.com同步更新.

<?xml version="1.0" encoding="UTF-8" ?>

<project>
<translate item="droppable" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果国" mail="lgg860911@yahoo.com.cn" homepage="http://blog.csdn.net/lgg201" qq="285821471" />
</translators>
<relatives>
<depend isitem="false">
<name><![CDATA[jquery]]></name>
<description><![CDATA[jquery的核心库]]></description>
<url><![CDATA[http://docs.jquery.com]]></url>
</depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心库]]></description>
<url><![CDATA[http://jqueryui.com/demos]]></url>
</depend>
</relatives>
<overview>
<original><![CDATA[JQuery UI Droppable插件可以将选择的元素放入(意思是他们接受通过拖拽放入的组件), 可以指定不同的draggable被不同的droppable分别接收.
所有的回调函数(active, deactive, over, out, drop等事件)接受两个参数:
event: 浏览器原生的事件
ui: 一个JQuery的ui对象, 其中有以下主要属性
ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)]]></original>
</overview>
<options>
<option name="accept" default="*">
<types>
<type name="选择器"><description><![CDATA[所有匹配指定选择器的draggable组件都可以被接收.]]></description></type>
<type name="函数">
<description><![CDATA[如果指定的是一个函数, 该函数将在每个draggable组件被放入时被调用, draggable组件被作为第一个参数传入, 如果函数处理返回结果是true, 那么就认为该组件是可接受的. 其实就是一个filter过滤函数.]]></description>
</type>
</types>
<description><![CDATA[用来设置可以接收的draggable元素的选择器或过滤器.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').droppable({ accept: '.special' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var accept = $('.selector').droppable('option', 'accept');
获取.selector选择器选中的droppable控件的accept选项的值.]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'accept', '.special');]]></code>
</demo>
</demos>
</option>
<option name="activeClass" default="false">
<types>
<type name="字符串" />
</types>
<description><![CDATA[指定一个样式的名称, 在所有当前droppable控件可接收的draggable控件中任意一个拖动的时候, 就将该droppable控件的样式改变为这里设置的样式. 相当于用于提示用户, 现在正在拖动的控件可以被放到什么地方.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ appendTo: 'body' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var activeClass = $('.selector').droppable('option', 'activeClass');
]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'activeClass', '.ui-state-highlight');]]></code>
</demo>
<demo>
<comment><![CDATA[译者注: demo中, 设置了两个draggable和两个droppable, 由于设置了对应的scope, 所以只能对号入座, 因此, 拖动draggable_a的时候, droppable_a就相应的显示了设定的activeClass]]></comment>
<code><![CDATA[
<style type="text/css">
.draggable{ width: 70px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-state-highlight{background: #88EE88;}
</style>
<script type="text/javascript">
$(function() {
$("#draggable_a").draggable({scope: 'a'});
$("#draggable_b").draggable({scope: 'b'});
$("#droppable_a").droppable({
scope: 'a',
activeClass: 'ui-state-highlight'
});
$("#droppable_b").droppable({
scope: 'b',
activeClass: 'ui-state-highlight'
});
});
</script>
<body>

<div id="draggable_a" class="draggable ui-widget-header">
<p>Drag me to my target</p>
</div>
<div id="draggable_b" class="draggable ui-widget-header">
<p>Drag me to my target</p>
</div>

<div id="droppable_a" class="droppable ui-widget-header">
<p>Drop here</p>
</div>
<div id="droppable_b" class="droppable ui-widget-header">
<p>Drop here</p>
</div>
</body>
]]></code>
</demo>
</demos>
</option>
<option name="addClasses" default="true">
<types>
<type name="布尔值"></type>
</types>
<description><![CDATA[用来设置是否给droppable元素通过ui-droppable样式才装饰它. 主要为了在通过.droppable()初始化很多(成百个)元素的时候优化性能考虑
true表示ui-droppable样式被添加到该元素.
false表示ui-droppable样式不被添加到该元素.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').droppable({ addClasses: false });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var addClasses = $('.selector').droppable('option', 'addClasses');]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'addClasses', false);]]></code>
</demo>
</demos>
</option>
<option name="greedy" default="false">
<relatives>
<innerrelative item="droppable" type="event" name="drop"><![CDATA[该选项的设定会影响drop事件的传播]]></innerrelative>
</relatives>
<types>
<type name="Boolean">
</type>
<description><![CDATA[如果设置为true, 在嵌套droppable时会阻止事件向上传播. ]]></description>
</types>
<description><![CDATA[ 由于javascript是把HTML作为一棵DOM树来解析的, 所以, 元素之间存在父子关系. 当两个droppable控件有父子关系(只要是直系亲属关系都会发生)时, 事件会自动向上传播, 因此, 在有些情况下, 需要显式的来停止这种事件的传播.
该选项只影响drop事件, 其他事件经过测试不会传播.
事件传播是合理的, 但是在有些情况下是不需要的或会引发混乱, 比如: div中包含了一个a标签, 那么点击a的时候, 实际上也是点击了div, 因为a在它中间嘛.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').droppable({ greedy: true });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var greedy = $('.selector').droppable('option', 'greedy');]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'greedy', true);]]></code>
</demo>
<demo>
<comment><![CDATA[译者注: greedy_draggable拖动到droppable_child中的时候, droppable_child是会响应事件的, 但是由于droppable_child中设置了greedy为true, droppable_parent不会响应事件]]></comment>
<code><![CDATA[
<style type="text/css">
#msg{color: red; font: 12px;}
.draggable{ width: 70px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-state-highlight{background: #88EE88;}
</style>
<script type="text/javascript">
$(function() {
$('#greedy_draggable').draggable();
$("#droppable_child").droppable({
drop: function(event, ui) {
$('#msg').text($('#msg').text() + '<br />子元素响应了事件');
},
active: function(event, ui) {
$('#msg').text($('#msg').text() + '<br />子元素响应了事件');
}
});
$("#droppable_parent").droppable({
drop: function(event, ui) {
$('#msg').text($('#msg').text() + '<br />事件传播到了父元素');
},
active: function(event, ui) {
$('#msg').text($('#msg').text() + '<br />事件传播到了父元素');
}
});

});
</script>
<body>
<div id="msg"></div>
<div id="greedy_draggable" class="draggable ui-widget-header">greedy测试draggable</div>

<div id="droppable_parent" class="droppable ui-widget-header">父元素
<div id="droppable_child" class="droppable ui-widget-header" style="width: 80px; height: 80px; border: 2px solid red;">子元素</div>
</div>
</body>
]]></code>
</demo>
</demos>
</option>
<option name="hoverClass" default="false">
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[通过指定一个样式名, 来给定当一个当前droppable控件可接受的draggable控件移动到它上面的时候, 使用的样式.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').droppable({ hoverClass: 'drophover' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var hoverClass = $('.selector').droppable('option', 'hoverClass');
]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'hoverClass', 'drophover');]]></code>
</demo>
</demos>
</option>
<option name="scope" default="default">
<relatives>
<innerrelative item="droppable" type="option" name="accept"><![CDATA[droppable中accept指定的选择器选择到的元素还必须满足scope相同.]]></innerrelative>
<innerrelative item="droppable" type="option" name="scope"><![CDATA[能够放入droppable的draggable两个元素的scope值必须相同.]]></innerrelative>
</relatives>
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[该选项描述一个范围, 只有那些scope选项值和这里的scope选项值相同的draggable控件才可以被放到这个droppable中. droppable的accept选项也接受这个选项的约束, accept选项指定的选择器是在scope进行过滤之后进行选择的.
例如:
$('#draggable_a').draggable({scope: 'a'});
$('#draggable_b').draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b').droppable({scope: 'b'});
droppable控件的accept选项默认是'*', 看起来数draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的约束, draggable_a只能放入到droppable_a, draggable_b只能发乳到droppable_b中.
注意: 这个选项就和变量的名称空间的意义类似. 默认值是'default', 说明如果不指定, 大家都还是有scope的, 名字是default而已.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').droppable({ scope: 'tasks' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scope = $('.selector').droppable('option', 'scope');]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'scope', 'tasks');]]></code>
</demo>
</demos>
</option>
<option name="tolerance" default="intersect">
<types>
<type name="字符串">
<options>
<option>
<value><![CDATA[fit]]></value>
<comment><![CDATA[draggable完全进入droppable]]></comment>
</option>
<option>
<value><![CDATA[intersect]]></value>
<comment><![CDATA[draggable至少50%进入droppable]]></comment>
</option>
<option>
<value><![CDATA[pointer]]></value>
<comment><![CDATA[鼠标指针进入droppable]]></comment>
</option>
<option>
<value><![CDATA[touch]]></value>
<comment><![CDATA[draggable进入droppable任意多]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[描述droppable把怎么样一种情况认为是可接受draggable在自己上面了(主要影响的是hover, 和over相关的事件)]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').droppable({ tolerance: 'fit' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var tolerance = $('.selector').droppable('option', 'tolerance');]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').droppable('option', 'tolerance', 'fit');]]></code>
</demo>
</demos>
</option>
</options>
<events>
<event name="activate">
<trigger><![CDATA[可接受的任意draggable开始活动(被拖动了)]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dropactivate]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').droppable({
activate: function(event, ui) { ... }
});]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$('.selector').bind('dropactivate', function(event, ui) {
...
});]]></code>
</demo>
</demos>
</event>
<event name="deactivate">
<trigger><![CDATA[可接受的任意draggable的拖动停止了]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dropdeactivate]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').droppable({
deactivate: function(event, ui) { ... }
});]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('dropdeactivate', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
<event name="over">
<trigger><![CDATA[可接受的任意draggable到达了当前droppable的上面]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dropover]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').droppable({
over: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('dropover', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
<event name="out">
<trigger><![CDATA[可接受的任意draggable从当前droppable上面出去了]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dropout]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').droppable({
out: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('dropout', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
<event name="drop">
<trigger><![CDATA[一个可接受的draggable控件放到了当前droppable中, 注意, 这里是放入成功, 也就是说到达了通过tolerance选项设置的认为over的位置并放开鼠标]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: drop]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').droppable({
drop: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('drop', function(event, ui) {
...
});
]]></code>
</demo>
<demo>
<comment><![CDATA[注意这里是和hoverClass, tolerance一起结合使用的, 效果比较明显. 这里设置的tolerance是touch, 所以, 只要你的draggable进入droppable一点的时候, 松开鼠标, 就已经表示放入成功了.]]></comment>
<code><![CDATA[
<style type="text/css">
#msg{color: red; font: 12px;}
.draggable{ width: 70px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-state-highlight{background: #88EE88;}
</style>
<script type="text/javascript">
$(function() {
$('#hover_draggable').draggable();
$('#hover_droppable').droppable({
tolerance: 'touch',
hoverClass: 'ui-state-highlight',
drop: function(event, ui) {
$('#msg').text($('#msg').text() + '放进去咯');
}
});
});
</script>
<body>
<div id="msg"></div>
<div id="hover_draggable" class="draggable ui-widget-header">hover draggable</div>
<div id="hover_droppable" class="droppable ui-widget-header">hover_droppable</div>
</body>
]]></code>
</demo>
</demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一个droppable控件, 使其回退到该元素被初始化成droppable控件之前的状态.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").droppable('destroy');]]></code>
</demo>
</demos>
</method>
<method name="disable">
<description><![CDATA[将可拖动控件样式改变成为失效, 与enable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").droppable('disable');]]></code>
</demo>
</demos>
</method>
<method name="enable">
<description><![CDATA[将可拖动控件样式改变为允许, 与disable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").droppable('enable');]]></code>
</demo>
</demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument>
<argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument>
</arguments>
<description><![CDATA[获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").droppable('option', optionName[, value]);]]></code>
</demo>
</demos>
</method>
</methods>
<summarize><![CDATA[
呵呵, 将draggable和droppable结合起来, 就以这个例子作为结束吧. 没有源码中涉及的图标没有的朋友可以去下载, 就是一个文件夹图标, 一个文件图标, 一个回收站图标. 48*48大小的.
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable - Default Demo</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
body{height: 590px; background: #EEFFEE;}
#msg{color: red; font: 12px;}
.draggable{width: 48px; height: 48px;}
.droppable{width: 150px; height: 150px; background: #CCCCFF url(images/recycle.ico) no-repeat 50% 50%; border: 2px solid green; margin: 2px 0;}
.ui-state-highlight{background: #88EE88;}
.folder{background: url(images/folder.ico) no-repeat 50% 50%;}
.file{background: url(images/file.ico) no-repeat 50% 50%;}
.activate{background: #AAEEBB url(images/recycle.ico) no-repeat 50% 50%;}
.hover{background: #FFFF88 url(images/recycle.ico) no-repeat 50% 50%;}
</style>
<script type="text/javascript">
$(function() {
$('.file').draggable({
scope: 'file',
containment: 'body',
revert: 'invalid',
cursor: 'move',
cursorAt: 0,
helper: function() {
return $('<div style="width: 80px; height: 30px; background: #DDDDDD;">我被拖着, 好爽啊.</div>');
}
});
$('.folder').draggable({
scope: 'folder',
containment: 'body',
revert: 'invalid',
cursor: 'move',
cursorAt: 0,
helper: function() {
return $('<div style="width: 80px; height: 30px; background: #DDDDDD;">我被拖着, 好爽啊.</div>');
}
});
$('.folder_recycle').droppable({
scope: 'folder',
activeClass: 'activate',
hoverClass: 'hover',
drop: function(event, ui) {
$(event.target).append($('<div style="background: #FFCCCC; margin: 1px 0; border: 1px solid FF4444;">我是新被放进来的</div>'));
}
});
$('.file_recycle').droppable({
scope: 'file',
activeClass: 'activate',
hoverClass: 'hover',
drop: function(event, ui) {
$(event.target).append($('<div style="background: #FFCCCC; margin: 1px 0; border: 1px solid FF4444;">我是新被放进来的</div>'));
}
});
});
</script>
</head>
<body>
<div id="msg"></div>
<div class="folder draggable"></div>
<div class="file draggable"></div>
<div class="folder_recycle droppable">文件夹回收站</div>
<div class="file_recycle droppable">文件回收站</div>
</body>
</html>