jquery.ui.draggable中文文档

注意事项:
    1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议
    2. 格式中的所有项都是选填, 如果没有, 不写就是了.
    3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上
<!--[CDATA[这中间写内容]]>
    4. 翻译过程中, 一块对应的是一个<translate />标签.
    5. 希望大家工作愉快.


代码如下:


<?xml version="1.0" encoding="UTF-8" ?>
<project>
    <translate item="draggable" version="7.1">
        <translators>
            <translator nickname="selfimpr" name="雷果国" mail="lgg860911@yahoo.com" 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 Draggable插件用来使选中的元素可以通过鼠标拖动.
    Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.
    如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.
    所有的回调函数(start, stop, drag等事件)接受两个参数:
        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="addClasses" default="true">
                <types>
                    <type name="布尔值"></type>
                </types>
                <description><![CDATA[用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
            true表示ui-draggable样式被添加到该元素.
            false表示ui-draggable样式不被添加到该元素.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式]]></comment>
                        <code><![CDATA[$('.selector').draggable({ addClasses: false });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取.selector选择器选中的可拖动控件的addClasses选项的值.]]></comment>
                        <code><![CDATA[var addClasses = $('#draggable').draggable('option', 'addClasses');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[将.selector选择器选中的可拖动控件的addClasses选项值设置为false.]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'addClasses', false);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="appendTo" default="parent">
                <types>
                    <type name="DOM元素" />
                    <type name="选择器" />
                </types>
                <description><![CDATA[用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ appendTo: 'body' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var appendTo = $('.selector').draggable('option', 'appendTo');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'appendTo', 'body');.]]></code>
                    </demo>
                </demos>
            </option>
            <option name="axis" default="false">
                <types>
                    <type name="Boolean">
                        <options>
                            <option>
                                <value><![CDATA[false]]></value>
                                <comment><![CDATA[既可以水平, 也可以垂直拖动.]]></comment>
                            </option>
                        </options>
                    </type>
                    <type name="String">
                        <options>
                            <option>
                                <value><![CDATA[x]]></value>
                                <comment><![CDATA[只能水平拖动]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[y]]></value>
                                <comment><![CDATA[只能垂直拖动]]></comment>
                            </option>
                        </options>
                    </type>
                </types>
                <description><![CDATA[约束拖动过程中的取向.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ axis: 'x' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var axis = $('.selector').draggable('option', 'axis');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'axis', 'x');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="cancel" default=":input, option">
                <types>
                    <type name="选择器">
                    </type>
                </types>
                <description><![CDATA[通过选择器指定这类元素不能被渲染成draggable控件.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ cancel: 'button' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var cancel = $('.selector').draggable('option', 'cancel');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'cancel', 'button');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="connectToSortable" default="">
                <types>
                    <type name="">
                        <description><![CDATA[description]]></description>
                    </type>
                </types>
                <description><![CDATA[description]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[description]]></comment>
                        <code><![CDATA[description]]></code>
                    </demo>
                </demos>
            </option>
            <option name="containment" default="false">
                <types>
                    <type name="选择器">
                        <description><![CDATA[只能在选择器约束的元素内拖动]]></description>
                    </type>
                    <type name="元素">
                        <description><![CDATA[只能在给定的元素内拖动]]></description>
                    </type>
                    <type name="字符串">
                        <options>
                            <option>
                                <value><![CDATA[parent]]></value>
                                <comment><![CDATA[只能在父容器内拖动]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[document]]></value>
                                <comment><![CDATA[在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[widow]]></value>
                                <comment><![CDATA[只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条]]></comment>
                            </option>
                        </options>
                        <description><![CDATA[description]]></description>
                    </type>
                    <type name="数组">
                        <description><![CDATA[[x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.]]></description>
                    </type>
                    <type name="布尔型">
                        <options>
                            <option>
                                <value><![CDATA[false]]></value>
                                <comment><![CDATA[不限制拖动的活动范围]]></comment>
                            </option>
                        </options>
                    </type>
                </types>
                <description><![CDATA[影响指定可拖动控件的活动区域.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ containment: 'parent' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var containment = $('.selector').draggable('option', 'containment');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'containment', 'parent');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="cursor" default="auto">
                <types>
                    <type name="字符串">
                    </type>
                </types>
                <description><![CDATA[影响指定可拖动控件在拖动过程中的鼠标样式, 该样式设定之后, 需要控件的原始元素支持指定的cursor样式, 如果指定的值原始元素不支持, 则使用原始元素默认的cursor样式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair这个鼠标样式, 所以, 会以默认形式显示.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ cursor: 'crosshair' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var cursor = $('.selector').draggable('option', 'cursor');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="cursorAt" default="false">
                <types>
                    <type name="对象">
                        <description><![CDATA[通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置.]]></description>
                    </type>
                </types>
                <description><![CDATA[在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置就在哪里, 如果设置了, 就会在一个相对控件自身左上角偏移位置处, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖动过程中, 鼠标就会在自身的左上角向下向右各偏移8像素处.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ cursor: 'crosshair' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var cursor = $('.selector').draggable('option', 'cursor');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="delay" default="0">
                <types>
                    <type name="整数">
                        <description><![CDATA[单位是毫秒]]></description>
                    </type>
                </types>
                <description><![CDATA[可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次拖动有效, 否则, 认为这次拖动无效.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ delay: 500 });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var delay = $('.selector').draggable('option', 'delay');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'delay', 500);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="distance" default="1">
                <types>
                    <type name="整数">
                        <description><![CDATA[单位是像素]]></description>
                    </type>
                </types>
                <description><![CDATA[可拖动控件从鼠标左键按下开始, 到拖动效果产生的时鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才认为是有效的拖动.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ distance: 30 });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var distance = $('.selector').draggable('option', 'distance');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'distance', 30);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="grid" default="false">
                <types>
                    <type name="数组">
                        <description><![CDATA[[x, y], x代表水平大小, y代表垂直大小, 单位是像素]]></description>
                    </type>
                </types>
                <description><![CDATA[可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ grid: [50, 20] });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var grid = $('.selector').draggable('option', 'grid');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'grid', [50, 20]);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="handle" default="false">
                <types>
                    <type name="选择器">
                        <description><![CDATA[选定的内部元素为控制拖动的部件]]></description>
                    </type>
                    <type name="元素">
                        <description><![CDATA[指定的元素为控制拖动的部件]]></description>
                    </type>
                </types>
                <description><![CDATA[指定触发拖动的元素. 用法: 将一个id=window的div设置为可拖动控件, 设置它的handle是该div中的一个id=title的span, 那么, 就只有在id=title的span上点击拖动才是有效的. 注意: 该元素一定要是可拖动控件的子元素.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ handle: 'h2' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var handle = $('.selector').draggable('option', 'handle');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'handle', 'h2');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="helper" default="original">
                <types>
                    <type name="字符串">
                        <options>
                            <option>
                                <value><![CDATA[original]]></value>
                                <comment><![CDATA[可拖动控件本身移动]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[clone]]></value>
                                <comment><![CDATA[将可拖动控件自身克隆一个移动, 自身在原始位置不变]]></comment>
                            </option>
                        </options>
                        <description><![CDATA[description]]></description>
                    </type>
                    <type name="函数">
                        <description><![CDATA[函数则必须返回一个DOM元素: 以函数返回的DOM元素移动展现拖动的过程.]]></description>
                    </type>
                </types>
                <description><![CDATA[拖动过程中帮助用户知道当前拖动位置的元素. 也就是拖动过程中随鼠标显示的元素.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化]]></comment>
                        <code><![CDATA[$('.selector').draggable({ helper: 'clone' });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[获取属性值]]></comment>
                        <code><![CDATA[var helper = $('.selector').draggable('option', 'helper');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[设置属性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'helper', 'clone');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="iframeFix" default="false">
                <types>
                    <type name="布尔值">
                        <options>
                            <option>
                                <value><![CDATA[true]]></value>
                                <comment><![CDATA[拖动过程中, 所有的iframe默认mousemove事件被屏蔽]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[false]]></value>
                    &nb 有用  |  无用 取消

猜你喜欢