欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery.ui.draggable中文文檔

 更新時(shí)間:2009年11月24日 18:17:36   作者:  
暫時(shí)都使用xml格式, 方便傳播, 制作電子書.
注意事項(xiàng):
    1. 以下格式為既定的格式, 為了統(tǒng)一性, 需要修改時(shí), 大家商議
    2. 格式中的所有項(xiàng)都是選填, 如果沒有, 不寫就是了.
    3. 由于是XML格式的, 所以, 所有標(biāo)簽中間填寫文本的地方(最重要是代碼, 一定要加, 不然以后解析有困難), 都需要加上
<!--[CDATA[這中間寫內(nèi)容]]>
    4. 翻譯過程中, 一塊對(duì)應(yīng)的是一個(gè)<translate />標(biāo)簽.
    5. 希望大家工作愉快.
復(fù)制代碼 代碼如下:

<?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插件用來使選中的元素可以通過鼠標(biāo)拖動(dòng).
    Draggable的元素受影響css: ui-draggable, 拖動(dòng)過程中的css: ui-draggable-dragging.
    如果需要的不僅僅是拖, 而是一個(gè)完整的拖放功能, 請(qǐng)參閱JQuery UI 的Droppable插件, 該插件提供了一個(gè)draggable放的目標(biāo).
    所有的回調(diào)函數(shù)(start, stop, drag等事件)接受兩個(gè)參數(shù):
        event: 瀏覽器原生的事件
        ui: 一個(gè)JQuery的ui對(duì)象, 其中有以下主要屬性
            ui.helper: 正在拖動(dòng)的元素的JQuery包裝對(duì)象, ui.helper.context可以獲取到原生的DOM元素.
            ui.position: ui.helper(也就是我們要拖動(dòng)的元素)相對(duì)于父元素(包含自己的元素, 如果是頂層, 對(duì)應(yīng)body)的偏移, 值是一個(gè)對(duì)象{top, left}----也就是可以用ui.position.top獲取到該元素與父元素的top當(dāng)前偏移
            ui.offset: 與ui.position同意, 這里表示的是和瀏覽器內(nèi)容區(qū)域左上邊界的偏移(注意, 是內(nèi)容區(qū)域, 而不是html的body區(qū)域. html的body在默認(rèn)情況下, 各種瀏覽器中都會(huì)相對(duì)offset有偏移的.)]]></original>
        </overview>
        <options>
            <option name="addClasses" default="true">
                <types>
                    <type name="布爾值"></type>
                </types>
                <description><![CDATA[用來設(shè)置是否給draggable元素通過ui-draggable樣式才裝飾它. 主要為了在通過.draggable()初始化很多(成百個(gè))元素的時(shí)候優(yōu)化性能考慮, 但是, 這個(gè)選項(xiàng)的設(shè)置, 不會(huì)影響ui-draggable-dragging樣式改變拖動(dòng)過程樣式.
            true表示ui-draggable樣式被添加到該元素.
            false表示ui-draggable樣式不被添加到該元素.]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[將.selector選擇器選中的元素渲染成為一個(gè)可拖動(dòng)控件, 不為其添加ui-draggable樣式]]></comment>
                        <code><![CDATA[$('.selector').draggable({ addClasses: false });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[獲取.selector選擇器選中的可拖動(dòng)控件的addClasses選項(xiàng)的值.]]></comment>
                        <code><![CDATA[var addClasses = $('#draggable').draggable('option', 'addClasses');]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[將.selector選擇器選中的可拖動(dòng)控件的addClasses選項(xiàng)值設(shè)置為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[用來指定控件在拖動(dòng)過程中ui.helper的容器, 默認(rèn)情況下, 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[設(shè)置屬性值]]></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[既可以水平, 也可以垂直拖動(dòng).]]></comment>
                            </option>
                        </options>
                    </type>
                    <type name="String">
                        <options>
                            <option>
                                <value><![CDATA[x]]></value>
                                <comment><![CDATA[只能水平拖動(dòng)]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[y]]></value>
                                <comment><![CDATA[只能垂直拖動(dòng)]]></comment>
                            </option>
                        </options>
                    </type>
                </types>
                <description><![CDATA[約束拖動(dòng)過程中的取向.]]></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[設(shè)置屬性值]]></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[設(shè)置屬性值]]></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[只能在選擇器約束的元素內(nèi)拖動(dòng)]]></description>
                    </type>
                    <type name="元素">
                        <description><![CDATA[只能在給定的元素內(nèi)拖動(dòng)]]></description>
                    </type>
                    <type name="字符串">
                        <options>
                            <option>
                                <value><![CDATA[parent]]></value>
                                <comment><![CDATA[只能在父容器內(nèi)拖動(dòng)]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[document]]></value>
                                <comment><![CDATA[在當(dāng)前html文檔的document下可拖動(dòng), 超出瀏覽器窗口范圍時(shí), 自動(dòng)出現(xiàn)滾動(dòng)條]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[widow]]></value>
                                <comment><![CDATA[只能在當(dāng)前瀏覽器窗口的內(nèi)容區(qū)域拖動(dòng), 拖動(dòng)超出當(dāng)前窗口范圍, 不會(huì)導(dǎo)致出現(xiàn)滾動(dòng)條]]></comment>
                            </option>
                        </options>
                        <description><![CDATA[description]]></description>
                    </type>
                    <type name="數(shù)組">
                        <description><![CDATA[[x1, y1, x2, y2]以[開始水平坐標(biāo), 開始垂直坐標(biāo), 結(jié)束水平坐標(biāo), 結(jié)束垂直坐標(biāo)]的方式劃定一個(gè)區(qū)域, 只能在此區(qū)域內(nèi)拖動(dòng). 這種方式指定時(shí), 值是相對(duì)當(dāng)前瀏覽器窗口內(nèi)容區(qū)域左上角的偏移值.]]></description>
                    </type>
                    <type name="布爾型">
                        <options>
                            <option>
                                <value><![CDATA[false]]></value>
                                <comment><![CDATA[不限制拖動(dòng)的活動(dòng)范圍]]></comment>
                            </option>
                        </options>
                    </type>
                </types>
                <description><![CDATA[影響指定可拖動(dòng)控件的活動(dòng)區(qū)域.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'containment', 'parent');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="cursor" default="auto">
                <types>
                    <type name="字符串">
                    </type>
                </types>
                <description><![CDATA[影響指定可拖動(dòng)控件在拖動(dòng)過程中的鼠標(biāo)樣式, 該樣式設(shè)定之后, 需要控件的原始元素支持指定的cursor樣式, 如果指定的值原始元素不支持, 則使用原始元素默認(rèn)的cursor樣式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair這個(gè)鼠標(biāo)樣式, 所以, 會(huì)以默認(rèn)形式顯示.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="cursorAt" default="false">
                <types>
                    <type name="對(duì)象">
                        <description><![CDATA[通過設(shè)置對(duì)象的top, left, right, bottom的屬性值中的一個(gè)或兩個(gè)來確定位置.]]></description>
                    </type>
                </types>
                <description><![CDATA[在拖動(dòng)控件的過程中, 鼠標(biāo)在控件上顯示的位置, 值為false(默認(rèn))時(shí), 從哪里點(diǎn)擊開始拖動(dòng), 鼠標(biāo)位置就在哪里, 如果設(shè)置了, 就會(huì)在一個(gè)相對(duì)控件自身左上角偏移位置處, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖動(dòng)過程中, 鼠標(biāo)就會(huì)在自身的左上角向下向右各偏移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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="delay" default="0">
                <types>
                    <type name="整數(shù)">
                        <description><![CDATA[單位是毫秒]]></description>
                    </type>
                </types>
                <description><![CDATA[可拖動(dòng)控件從鼠標(biāo)左鍵按下開始, 到拖動(dòng)效果產(chǎn)生的延時(shí). 該選項(xiàng)可以被用來阻止一些不期望的點(diǎn)擊帶來的無效拖動(dòng). 具體效果是: 一次拖動(dòng), 從鼠標(biāo)左鍵按下, 到delay指定的時(shí)間, 如果鼠標(biāo)左鍵還沒有松開, 那么就認(rèn)為這次拖動(dòng)有效, 否則, 認(rèn)為這次拖動(dòng)無效.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'delay', 500);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="distance" default="1">
                <types>
                    <type name="整數(shù)">
                        <description><![CDATA[單位是像素]]></description>
                    </type>
                </types>
                <description><![CDATA[可拖動(dòng)控件從鼠標(biāo)左鍵按下開始, 到拖動(dòng)效果產(chǎn)生的時(shí)鼠標(biāo)必須產(chǎn)生的位移. 該選項(xiàng)可以被用來阻止一些不期望的點(diǎn)擊帶來的無效拖動(dòng). 具體效果是: 一次拖動(dòng), 從鼠標(biāo)左鍵按下, 只有當(dāng)鼠標(biāo)產(chǎn)生的位移達(dá)到distance指定的值時(shí), 才認(rèn)為是有效的拖動(dòng).]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'distance', 30);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="grid" default="false">
                <types>
                    <type name="數(shù)組">
                        <description><![CDATA[[x, y], x代表水平大小, y代表垂直大小, 單位是像素]]></description>
                    </type>
                </types>
                <description><![CDATA[可拖動(dòng)控件拖動(dòng)時(shí)采用grid的方式拖動(dòng), 也就是說拖動(dòng)過程中的單位是guid選項(xiàng)指定的數(shù)組描述的格子那么大.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'grid', [50, 20]);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="handle" default="false">
                <types>
                    <type name="選擇器">
                        <description><![CDATA[選定的內(nèi)部元素為控制拖動(dòng)的部件]]></description>
                    </type>
                    <type name="元素">
                        <description><![CDATA[指定的元素為控制拖動(dòng)的部件]]></description>
                    </type>
                </types>
                <description><![CDATA[指定觸發(fā)拖動(dòng)的元素. 用法: 將一個(gè)id=window的div設(shè)置為可拖動(dòng)控件, 設(shè)置它的handle是該div中的一個(gè)id=title的span, 那么, 就只有在id=title的span上點(diǎn)擊拖動(dòng)才是有效的. 注意: 該元素一定要是可拖動(dòng)控件的子元素.]]></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[設(shè)置屬性值]]></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[可拖動(dòng)控件本身移動(dòng)]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[clone]]></value>
                                <comment><![CDATA[將可拖動(dòng)控件自身克隆一個(gè)移動(dòng), 自身在原始位置不變]]></comment>
                            </option>
                        </options>
                        <description><![CDATA[description]]></description>
                    </type>
                    <type name="函數(shù)">
                        <description><![CDATA[函數(shù)則必須返回一個(gè)DOM元素: 以函數(shù)返回的DOM元素移動(dòng)展現(xiàn)拖動(dòng)的過程.]]></description>
                    </type>
                </types>
                <description><![CDATA[拖動(dòng)過程中幫助用戶知道當(dāng)前拖動(dòng)位置的元素. 也就是拖動(dòng)過程中隨鼠標(biāo)顯示的元素.]]></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[設(shè)置屬性值]]></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[拖動(dòng)過程中, 所有的iframe默認(rèn)mousemove事件被屏蔽]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[false]]></value>
                                <comment><![CDATA[拖動(dòng)過程中, 鼠標(biāo)進(jìn)入iframe時(shí)iframe的mousemove也會(huì)做默認(rèn)事件響應(yīng).]]></comment>
                            </option>
                        </options>
                    </type>
                    <type name="選擇器">
                        <description><![CDATA[針對(duì)選擇到的iframe屏蔽mousemove事件默認(rèn)響應(yīng)]]></description>
                    </type>
                </types>
                <description><![CDATA[阻止拖動(dòng)過程中由于鼠標(biāo)指針在iframe區(qū)域移動(dòng), iframe對(duì)鼠標(biāo)移動(dòng)事件的默認(rèn)響應(yīng).
            如果設(shè)置為true, 將會(huì)阻止拖動(dòng)過程中當(dāng)前頁面上所有的iframe的mousemove事件, 如果設(shè)置一個(gè)選擇器, 將會(huì)阻止指定的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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'iframeFix', true);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="opacity" default="false">
                <types>
                    <type name="浮點(diǎn)數(shù)值">
                        <description><![CDATA[不透明度, 數(shù)值越小越透明]]></description>
                    </type>
                </types>
                <description><![CDATA[拖動(dòng)過程中helper(拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的控件)的不透明度.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'opacity', 0.35);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="refreshPositions" default="false">
                <types>
                    <type name="Boolean">
                        <description><![CDATA[如果設(shè)置為true, 所有的droppable位置會(huì)在每次mousemove事件中進(jìn)行計(jì)算.]]></description>
                    </type>
                </types>
                <description><![CDATA[該選項(xiàng)主要用于解決高級(jí)動(dòng)態(tài)頁面展現(xiàn)問題. 慎用.]]></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[設(shè)置屬性值]]></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[每次拖動(dòng)停止之后, 元素自動(dòng)回到原始位置]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[false]]></value>
                                <comment><![CDATA[拖動(dòng)之后不會(huì)自動(dòng)回到原始位置.]]></comment>
                            </option>
                        </options>
                    </type>
                    <type name="字符串">
                        <options>
                            <option>
                                <value><![CDATA[invalid]]></value>
                                <comment><![CDATA[除非是一個(gè)droppable并且被drop(放)成功了, 才不將元素返回到原始位置.]]></comment>
                            </option>
                            <option>
                                <value><![CDATA[valid]]></value>
                                <comment><![CDATA[除非是放入一個(gè)droppable并且被drop(放)成功了, 才不將元素返回到原始位置.]]></comment>
                            </option>
                        </options>
                    </type>
                </types>
                <description><![CDATA[影響一次拖動(dòng)之后是否回歸到原始位置.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'revert', true);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="revertDuration" default="500">
                <types>
                    <type name="整數(shù)">
                    </type>
                </types>
                <description><![CDATA[revert(回歸到原始位置)整個(gè)過程需要的時(shí)間, 單位是毫秒. 如果設(shè)置revert選項(xiàng)設(shè)置為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[設(shè)置屬性值]]></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兩個(gè)元素的scope值必須相同.]]></innerrelative>
                </relatives>
                <types>
                    <type name="字符串">
                    </type>
                </types>
                <description><![CDATA[該選項(xiàng)描述一個(gè)范圍, 和droppable的同名選項(xiàng)結(jié)合使用, droppable的accept選項(xiàng)用來設(shè)置可以接受的draggable控件, 同時(shí), 可接受的drggable控件受scope選項(xiàng)約束, 必須是同一個(gè)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選項(xiàng)默認(rèn)是'*', 看起來數(shù)draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的約束, draggable_a只能放入到droppable_a, draggable_b只能發(fā)乳到droppable_b中.
            注意: 這個(gè)選項(xiàng)就和變量的名稱空間的意義類似. 默認(rèn)值是'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[設(shè)置屬性值]]></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[如果設(shè)置為true, 在拖動(dòng)過程中超出可拖動(dòng)控件容器的時(shí)候, 容器自動(dòng)增加滾動(dòng)條]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'scroll', false);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="scrollSensitivity" default="20">
                <types>
                    <type name="整數(shù)值">
                    </type>
                </types>
                <description><![CDATA[滾動(dòng)條的敏感度.
            下面所屬的鼠標(biāo)指針是指在draggable控件移動(dòng)過程中, 鼠標(biāo)所處位置.
            鼠標(biāo)指針和與draggable控件所在容器的邊距離為多少的時(shí)候, 滾動(dòng)條開始滾動(dòng).]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'scrollSensitivity', 40);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="scrollSpeed" default="20">
                <types>
                    <type name="整數(shù)值">
                    </type>
                </types>
                <description><![CDATA[由于scrollSensitivity導(dǎo)致的滾動(dòng)發(fā)生時(shí), 滾動(dòng)條一次滾動(dòng)多少像素值.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'scrollSpeed', 40);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="snap" default="false">
                <types>
                    <type name="Boolean">
                        <description><![CDATA[設(shè)置為true等價(jià)與設(shè)置選擇器.ui-draggable]]></description>
                    </type>
                    <type name="選擇器">
                        <description><![CDATA[選擇器指定的所有元素上, 當(dāng)前的draggable控件都可以實(shí)現(xiàn)吸附功能]]></description>
                    </type>
                </types>
                <description><![CDATA[吸附功能, 設(shè)置為true等價(jià)與設(shè)置選擇器.ui-draggable, 具體效果是在選擇器指定的所有元素上, 當(dāng)前的draggable控件都可以實(shí)現(xiàn)吸附功能, 吸附就是拖動(dòng)過程中, 靠近但是還沒有挨上目標(biāo)組件是, 自動(dòng)的將正在拖動(dòng)的組件吸過去.]]></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[設(shè)置屬性值]]></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[在指定的元素內(nèi)部可以吸附]]></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[設(shè)定吸附時(shí)候的模式.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'snapMode', 'outer');]]></code>
                    </demo>
                </demos>
            </option>
            <option name="snapTolerance" default="20">
                <types>
                    <type name="整數(shù)">
                    </type>
                </types>
                <description><![CDATA[設(shè)定離目標(biāo)對(duì)象的邊多少像素的時(shí)候, 進(jìn)行吸附.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code>
                    </demo>
                </demos>
            </option>
            <option name="stack" default="false">
                <types>
                    <type name="對(duì)象">
                        <description><![CDATA[{group: '.selector', min: 50} 其中, group制定的是一個(gè)選擇器, 用來規(guī)定那些對(duì)象是一組. min是該組的最小z-index值]]></description>
                    </type>
                </types>
                <description><![CDATA[一次初始化一組draggable控件的時(shí)候, 將其中的一些draggable控件以給定選擇器選擇, 作為一組, 這時(shí), 這一組draggable控件就可以實(shí)現(xiàn)當(dāng)前被拖動(dòng)的始終在最前效果, 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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });]]></code>
                    </demo>
                </demos>
            </option>
            <option name="zIndex" default="false">
                <types>
                    <type name="整數(shù)">
                    </type>
                </types>
                <description><![CDATA[拖動(dòng)時(shí)的helper(跟隨鼠標(biāo)移動(dòng)的控件)的z-index值. z-index就是css中的層疊層數(shù), 數(shù)值越大, 越在上層.]]></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[設(shè)置屬性值]]></comment>
                        <code><![CDATA[$('.selector').draggable('option', 'zIndex', 2700);]]></code>
                    </demo>
                </demos>
            </option>
        </options>
        <events>
            <event name="start">
                <trigger><![CDATA[拖動(dòng)開始, 指鼠標(biāo)按下, 開始移動(dòng)]]></trigger>
                <arguments>
                    <argument name="event">
                        <![CDATA[原生的瀏覽器事件.]]>
                    </argument>
                    <argument name="ui">
                        <![CDATA[JQuery的ui對(duì)象]]>
                    </argument>
                </arguments>
                <description><![CDATA[類型: dragstart]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化時(shí)設(shè)置事件]]></comment>
                        <code><![CDATA[$('.selector').draggable({
                         start: function(event, ui) { alert(this); },
                        });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[動(dòng)態(tài)的綁定事件. 動(dòng)態(tài)綁定時(shí)候, 使用的事件名就是事件的類型.]]></comment>
                        <code><![CDATA[$(".selector").bind('dragstart', function(event, ui) {
            alert(this);
        });]]></code>
                    </demo>
                </demos>
            </event>
            <event name="drag">
                <trigger><![CDATA[拖動(dòng)過程中鼠標(biāo)移動(dòng)]]></trigger>
                <arguments>
                    <argument name="event">
                        <![CDATA[原生的瀏覽器事件.]]>
                    </argument>
                    <argument name="ui">
                        <![CDATA[JQuery的ui對(duì)象]]>
                    </argument>
                </arguments>
                <description><![CDATA[類型: drag]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化時(shí)設(shè)置事件]]></comment>
                        <code><![CDATA[$('.selector').draggable({
                         drag: function(event, ui) { alert(this); },
                        });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[動(dòng)態(tài)的綁定事件. 動(dòng)態(tài)綁定時(shí)候, 使用的事件名就是事件的類型.]]></comment>
                        <code><![CDATA[$(".selector").bind('drag', function(event, ui) {
                            alert(this);
                        });]]></code>
                    </demo>
                </demos>
            </event>
            <event name="stop">
                <trigger><![CDATA[拖動(dòng)結(jié)束]]></trigger>
                <arguments>
                    <argument name="event">
                        <![CDATA[原生的瀏覽器事件.]]>
                    </argument>
                    <argument name="ui">
                        <![CDATA[JQuery的ui對(duì)象]]>
                    </argument>
                </arguments>
                <description><![CDATA[類型: dragstop]]></description>
                <demos>
                    <demo>
                        <comment><![CDATA[初始化時(shí)設(shè)置事件]]></comment>
                        <code><![CDATA[$('.selector').draggable({
                         stop: function(event, ui) { alert(this); },
                        });]]></code>
                    </demo>
                    <demo>
                        <comment><![CDATA[動(dòng)態(tài)的綁定事件. 動(dòng)態(tài)綁定時(shí)候, 使用的事件名就是事件的類型.]]></comment>
                        <code><![CDATA[$(".selector").bind('dragstop', function(event, ui) {
            alert(this);
        });]]></code>
                    </demo>
                </demos>
            </event>
        </events>
        <methods>
            <method name="destroy">
                <description><![CDATA[完全移除一個(gè)可拖動(dòng)控件, 使其回退到該元素被初始化成可拖動(dòng)控件之前的狀態(tài).]]></description>
                <demos>
                    <demo>
                        <code><![CDATA[$(".selector").progressbar('destroy');]]></code>
                    </demo>
                </demos>
            </method>
            <method name="disable">
                <description><![CDATA[將可拖動(dòng)控件樣式改變成為失效, 與enable對(duì)應(yīng).]]></description>
                <demos>
                    <demo>
                        <code><![CDATA[$(".selector").progressbar('disable');]]></code>
                    </demo>
                </demos>
            </method>
            <method name="enable">
                <description><![CDATA[將可拖動(dòng)控件樣式改變?yōu)樵试S, 與disable對(duì)應(yīng).]]></description>
                <demos>
                    <demo>
                        <code><![CDATA[$(".selector").progressbar('enable');]]></code>
                    </demo>
                </demos>
            </method>
            <method name="option">
                <arguments>
                    <argument name="optionName " type="字符串"><![CDATA[選項(xiàng)一節(jié)中列舉的所有選項(xiàng)名都可用]]></argument>
                    <argument name="value" type="任意"><![CDATA[該選項(xiàng)可以接受的任意數(shù)據(jù)值.]]></argument>
                </arguments>
                <description><![CDATA[獲取或設(shè)置可拖動(dòng)控件的選項(xiàng), 第二個(gè)參數(shù)是選項(xiàng)名, 第三個(gè)參數(shù)是值. 如果不指定值, 就是獲取, 指定值, 就是設(shè)置. ]]></description>
                <demos>
                    <demo>
                        <code><![CDATA[$(".selector").progressbar('option', optionName[, value]);]]></code>
                    </demo>
                </demos>
            </method>
        </methods>
        <summarize><![CDATA[addClasses: 用來設(shè)置是否添加ui-draggable樣式.
appendTo: 設(shè)置追加到什么地方
axis: 設(shè)置拖動(dòng)的方向
cancel, handle: 設(shè)置控制整個(gè)控件拖動(dòng)動(dòng)作的區(qū)域, cancel指定區(qū)域不能拖動(dòng), handle指定區(qū)域控制控件拖動(dòng).
connectToSortable: 需要和sortable集成.
containment: 設(shè)置控件可拖動(dòng)范圍
cursor, cursorAt: 設(shè)置拖動(dòng)過程中, 鼠標(biāo)的樣式及相對(duì)空間自身的位置.
delay, distance: 設(shè)置拖動(dòng)的延遲, delay設(shè)置延遲時(shí)間, distance設(shè)置延遲距離, 目的是防止誤點(diǎn)擊帶來的不期望拖動(dòng).
grid: 設(shè)置拖動(dòng)過程移動(dòng)的單位(以小格的方式移動(dòng))
helper: 設(shè)置拖動(dòng)過程中, 跟隨鼠標(biāo)移動(dòng)的組件.
iframeFix: 解決拖動(dòng)過程中與iframe層疊后的事件問題.
opacity: 拖動(dòng)過程helper的不透明度.
refreshPositions: 設(shè)置后drop過程中, 鼠標(biāo)每次移動(dòng)都會(huì)計(jì)算位置.
revert, revertDuration: 設(shè)置撤銷移動(dòng)相關(guān).
scope: 設(shè)定draggable的域, 用來和droppable結(jié)合使用時(shí)確定可放入的目標(biāo).
scroll, scrollSensitivity, scrollSpeed: 設(shè)置拖動(dòng)過程中帶來的滾動(dòng)條相關(guān)問題.
snap, snapMode, snapTolerance: 設(shè)置吸附的相關(guān)屬性.
stack, zIndex: 設(shè)置控件的層次.
]]--></summarize>
    </translate>
</project>

相關(guān)文章

最新評(píng)論