jquery.ui.draggable中文文档


Posted in Javascript onNovember 24, 2009

注意事项:
    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> 
                                <comment><![CDATA[拖动过程中, 鼠标进入iframe时iframe的mousemove也会做默认事件响应.]]></comment> 
                            </option> 
                        </options> 
                    </type> 
                    <type name="选择器"> 
                        <description><![CDATA[针对选择到的iframe屏蔽mousemove事件默认响应]]></description> 
                    </type> 
                </types> 
                <description><![CDATA[阻止拖动过程中由于鼠标指针在iframe区域移动, iframe对鼠标移动事件的默认响应. 
            如果设置为true, 将会阻止拖动过程中当前页面上所有的iframe的mousemove事件, 如果设置一个选择器, 将会阻止指定的iframe的mousemove事件.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ iframeFix: true });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var iframeFix = $('.selector').draggable('option', 'iframeFix');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'iframeFix', true);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="opacity" default="false"> 
                <types> 
                    <type name="浮点数值"> 
                        <description><![CDATA[不透明度, 数值越小越透明]]></description> 
                    </type> 
                </types> 
                <description><![CDATA[拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ opacity: 0.35 });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var opacity = $('.selector').draggable('option', 'opacity');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'opacity', 0.35);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="refreshPositions" default="false"> 
                <types> 
                    <type name="Boolean"> 
                        <description><![CDATA[如果设置为true, 所有的droppable位置会在每次mousemove事件中进行计算.]]></description> 
                    </type> 
                </types> 
                <description><![CDATA[该选项主要用于解决高级动态页面展现问题. 慎用.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ refreshPositions: true });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var refreshPositions = $('.selector').draggable('option', 'refreshPositions');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'refreshPositions', true);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="revert" default="false"> 
                <types> 
                    <type name="Boolean"> 
                        <options> 
                            <option> 
                                <value><![CDATA[true]]></value> 
                                <comment><![CDATA[每次拖动停止之后, 元素自动回到原始位置]]></comment> 
                            </option> 
                            <option> 
                                <value><![CDATA[false]]></value> 
                                <comment><![CDATA[拖动之后不会自动回到原始位置.]]></comment> 
                            </option> 
                        </options> 
                    </type> 
                    <type name="字符串"> 
                        <options> 
                            <option> 
                                <value><![CDATA[invalid]]></value> 
                                <comment><![CDATA[除非是一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.]]></comment> 
                            </option> 
                            <option> 
                                <value><![CDATA[valid]]></value> 
                                <comment><![CDATA[除非是放入一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.]]></comment> 
                            </option> 
                        </options> 
                    </type> 
                </types> 
                <description><![CDATA[影响一次拖动之后是否回归到原始位置.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ revert: true });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var revert = $('.selector').draggable('option', 'revert');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'revert', true);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="revertDuration" default="500"> 
                <types> 
                    <type name="整数"> 
                    </type> 
                </types> 
                <description><![CDATA[revert(回归到原始位置)整个过程需要的时间, 单位是毫秒. 如果设置revert选项设置为false, 则忽略此属性.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ revertDuration: 1000 });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var revertDuration = $('.selector').draggable('option', 'revertDuration');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'revertDuration', 1000);]]></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[该选项描述一个范围, 和droppable的同名选项结合使用, droppable的accept选项用来设置可以接受的draggable控件, 同时, 可接受的drggable控件受scope选项约束, 必须是同一个scope中的draggable和droppable才可以互相拖放. 
            例如: 
            $('#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').draggable({ scope: 'tasks' });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var scope = $('.selector').draggable('option', 'scope');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'scope', 'tasks');]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="scroll" default="true"> 
                <types> 
                    <type name="Boolean"> 
                    </type> 
                </types> 
                <description><![CDATA[如果设置为true, 在拖动过程中超出可拖动控件容器的时候, 容器自动增加滚动条]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ scroll: false });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var scope = $('.selector').draggable('option', 'scope');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'scroll', false);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="scrollSensitivity" default="20"> 
                <types> 
                    <type name="整数值"> 
                    </type> 
                </types> 
                <description><![CDATA[滚动条的敏感度. 
            下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置. 
            鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ scrollSensitivity: 40 });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'scrollSensitivity', 40);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="scrollSpeed" default="20"> 
                <types> 
                    <type name="整数值"> 
                    </type> 
                </types> 
                <description><![CDATA[由于scrollSensitivity导致的滚动发生时, 滚动条一次滚动多少像素值.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ scrollSpeed: 40 });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'scrollSpeed', 40);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="snap" default="false"> 
                <types> 
                    <type name="Boolean"> 
                        <description><![CDATA[设置为true等价与设置选择器.ui-draggable]]></description> 
                    </type> 
                    <type name="选择器"> 
                        <description><![CDATA[选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能]]></description> 
                    </type> 
                </types> 
                <description><![CDATA[吸附功能, 设置为true等价与设置选择器.ui-draggable, 具体效果是在选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能, 吸附就是拖动过程中, 靠近但是还没有挨上目标组件是, 自动的将正在拖动的组件吸过去.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ snap: true });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var snap = $('.selector').draggable('option', 'snap');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="snapMode" default="both"> 
                <types> 
                    <type name="字符串"> 
                        <options> 
                            <option> 
                                <value><![CDATA[inner]]></value> 
                                <comment><![CDATA[在指定的元素内部可以吸附]]></comment> 
                            </option> 
                            <option> 
                                <value><![CDATA[outer]]></value> 
                                <comment><![CDATA[在指定元素外部可以吸附]]></comment> 
                            </option> 
                            <option> 
                                <value><![CDATA[both]]></value> 
                                <comment><![CDATA[里面外面都可以吸附]]></comment> 
                            </option> 
                        </options> 
                    </type> 
                </types> 
                <description><![CDATA[设定吸附时候的模式.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ snapMode: 'outer' });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var snapMode = $('.selector').draggable('option', 'snapMode');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'snapMode', 'outer');]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="snapTolerance" default="20"> 
                <types> 
                    <type name="整数"> 
                    </type> 
                </types> 
                <description><![CDATA[设定离目标对象的边多少像素的时候, 进行吸附.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ snap: true });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var snap = $('.selector').draggable('option', 'snap');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="stack" default="false"> 
                <types> 
                    <type name="对象"> 
                        <description><![CDATA[{group: '.selector', min: 50} 其中, group制定的是一个选择器, 用来规定那些对象是一组. min是该组的最小z-index值]]></description> 
                    </type> 
                </types> 
                <description><![CDATA[一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ stack: { group: 'products', min: 50 } });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var stack = $('.selector').draggable('option', 'stack');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });]]></code> 
                    </demo> 
                </demos> 
            </option> 
            <option name="zIndex" default="false"> 
                <types> 
                    <type name="整数"> 
                    </type> 
                </types> 
                <description><![CDATA[拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ zIndex: 2700 });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[获取属性值]]></comment> 
                        <code><![CDATA[var zIndex = $('.selector').draggable('option', 'zIndex');]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[设置属性值]]></comment> 
                        <code><![CDATA[$('.selector').draggable('option', 'zIndex', 2700);]]></code> 
                    </demo> 
                </demos> 
            </option> 
        </options> 
        <events> 
            <event name="start"> 
                <trigger><![CDATA[拖动开始, 指鼠标按下, 开始移动]]></trigger> 
                <arguments> 
                    <argument name="event"> 
                        <![CDATA[原生的浏览器事件.]]> 
                    </argument> 
                    <argument name="ui"> 
                        <![CDATA[JQuery的ui对象]]> 
                    </argument> 
                </arguments> 
                <description><![CDATA[类型: dragstart]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化时设置事件]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ 
                         start: function(event, ui) { alert(this); }, 
                        });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment> 
                        <code><![CDATA[$(".selector").bind('dragstart', function(event, ui) { 
            alert(this); 
        });]]></code> 
                    </demo> 
                </demos> 
            </event> 
            <event name="drag"> 
                <trigger><![CDATA[拖动过程中鼠标移动]]></trigger> 
                <arguments> 
                    <argument name="event"> 
                        <![CDATA[原生的浏览器事件.]]> 
                    </argument> 
                    <argument name="ui"> 
                        <![CDATA[JQuery的ui对象]]> 
                    </argument> 
                </arguments> 
                <description><![CDATA[类型: drag]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化时设置事件]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ 
                         drag: function(event, ui) { alert(this); }, 
                        });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment> 
                        <code><![CDATA[$(".selector").bind('drag', function(event, ui) { 
                            alert(this); 
                        });]]></code> 
                    </demo> 
                </demos> 
            </event> 
            <event name="stop"> 
                <trigger><![CDATA[拖动结束]]></trigger> 
                <arguments> 
                    <argument name="event"> 
                        <![CDATA[原生的浏览器事件.]]> 
                    </argument> 
                    <argument name="ui"> 
                        <![CDATA[JQuery的ui对象]]> 
                    </argument> 
                </arguments> 
                <description><![CDATA[类型: dragstop]]></description> 
                <demos> 
                    <demo> 
                        <comment><![CDATA[初始化时设置事件]]></comment> 
                        <code><![CDATA[$('.selector').draggable({ 
                         stop: function(event, ui) { alert(this); }, 
                        });]]></code> 
                    </demo> 
                    <demo> 
                        <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment> 
                        <code><![CDATA[$(".selector").bind('dragstop', function(event, ui) { 
            alert(this); 
        });]]></code> 
                    </demo> 
                </demos> 
            </event> 
        </events> 
        <methods> 
            <method name="destroy"> 
                <description><![CDATA[完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.]]></description> 
                <demos> 
                    <demo> 
                        <code><![CDATA[$(".selector").progressbar('destroy');]]></code> 
                    </demo> 
                </demos> 
            </method> 
            <method name="disable"> 
                <description><![CDATA[将可拖动控件样式改变成为失效, 与enable对应.]]></description> 
                <demos> 
                    <demo> 
                        <code><![CDATA[$(".selector").progressbar('disable');]]></code> 
                    </demo> 
                </demos> 
            </method> 
            <method name="enable"> 
                <description><![CDATA[将可拖动控件样式改变为允许, 与disable对应.]]></description> 
                <demos> 
                    <demo> 
                        <code><![CDATA[$(".selector").progressbar('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").progressbar('option', optionName[, value]);]]></code> 
                    </demo> 
                </demos> 
            </method> 
        </methods> 
        <summarize><![CDATA[addClasses: 用来设置是否添加ui-draggable样式. 
appendTo: 设置追加到什么地方 
axis: 设置拖动的方向 
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动. 
connectToSortable: 需要和sortable集成. 
containment: 设置控件可拖动范围 
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置. 
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动. 
grid: 设置拖动过程移动的单位(以小格的方式移动) 
helper: 设置拖动过程中, 跟随鼠标移动的组件. 
iframeFix: 解决拖动过程中与iframe层叠后的事件问题. 
opacity: 拖动过程helper的不透明度. 
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置. 
revert, revertDuration: 设置撤销移动相关. 
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标. 
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题. 
snap, snapMode, snapTolerance: 设置吸附的相关属性. 
stack, zIndex: 设置控件的层次. 
]]--></summarize> 
    </translate> 
</project>
Javascript 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
JS 实现双色表格实现代码
Nov 24 #Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 #Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 #Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 #Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 #Javascript
js cookies实现简单统计访问次数
Nov 24 #Javascript
js获取图片长和宽度的代码
Nov 24 #Javascript
You might like
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python实现用户答题功能
2018/01/17 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python新手学习使用库
2020/06/11 Python
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
Delphi笔试题
2016/11/14 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
运动会广播稿150字
2014/02/19 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
校园安全广播稿范文
2014/09/25 职场文书
质量保证书格式
2015/02/27 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS