西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站！
軟件
軟件
文章
搜索

首頁 → 編程開發(fā) → javascript|JQuery → JQuery UI - draggable參數(shù)中文詳細說明

JQuery UI - draggable參數(shù)中文詳細說明

相關(guān)軟件相關(guān)文章發(fā)表評論 來源：西西整理時間：2011/6/2 10:49:38字體大小：A-A+

作者：西西點擊：882次評論：0次標(biāo)簽： JQuery

  • 類型：編程輔助大�。�109KB語言：中文 評分：5.0
  • 標(biāo)簽：
立即下載
  1. ·概述   
  2. 在任何DOM元素啟用拖動功能。通過單擊鼠標(biāo)并拖動對象在窗口內(nèi)的任何地方移動。   
  3. 官方示例地址：http://jqueryui.com/demos/draggable/  
  4.   
  5. 所有的事件回調(diào)函數(shù)都有兩個參數(shù)：event和ui，瀏覽器自有event對象，和經(jīng)過封裝的ui對象   
  6. ui.helper - 表示被拖拽的元素的JQuery對象   
  7. ui.position - 表示相對當(dāng)前對象，鼠標(biāo)的坐標(biāo)值對象{top,left}   
  8. ui.offset - 表示相對于當(dāng)前頁面，鼠標(biāo)的坐標(biāo)值對象{top,left}   
  9.   
  10. ·參數(shù)（參數(shù)名 : 參數(shù)類型 : 默認(rèn)值）   
  11. addClasses : Boolean : true  
  12.   如果設(shè)置成false，將在加載時阻止ui-draggable樣式的加載。   
  13.   當(dāng)有很多對象要加載draggable()插件的情況下，這將對性能有極大的優(yōu)化。   
  14.   初始: $('.selector').draggable({ addClasses: false });   
  15.   獲取: var addClasses = $('.selector').draggable('option', 'addClasses');   
  16.   設(shè)置: $('.selector').draggable('option', 'addClasses', false);   
  17.   
  18. appendTo : Element,Selector : 'parent'  
  19.   The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.   
  20.   初始：$('.selector').draggable({ appendTo: 'body' });   
  21.   獲�。�var appendTo = $('.selector').draggable('option', 'appendTo');   
  22.   設(shè)置：$('.selector').draggable('option', 'appendTo', 'body');   
  23.   
  24. axis : String : false  
  25.   約束拖動的動作只能在X軸或Y軸上執(zhí)行，可選值：'x', 'y'。   
  26.   初始：$('.selector').draggable({ axis: 'x' });   
  27.   獲取：var axis = $('.selector').draggable('option', 'axis');   
  28.   設(shè)置：$('.selector').draggable('option', 'axis', 'x');   
  29.   
  30. cancel : Selector : ':input,option'  
  31.   防止在指定的對象上開始拖動。   
  32.   初始：$('.selector').draggable({ cancel: 'button' });   
  33.   獲取：var cancel = $('.selector').draggable('option', 'cancel');   
  34.   設(shè)置：$('.selector').draggable('option', 'cancel', 'button');   
  35.   
  36. connectToSortable : Selector : false  
  37.   允許draggable被拖拽到指定的sortables中，如果使用此選項helper屬性必須設(shè)置成clone才能正常工作。   
  38.   初始：$('.selector').draggable({ connectToSortable: 'ul#myList' });   
  39.   獲�。�var connectToSortable = $('.selector').draggable('option', 'connectToSortable');   
  40.   設(shè)置：$('.selector').draggable('option', 'connectToSortable', 'ul#myList');   
  41.   
  42. containment : Selector,Element,String, Array : false    
  43.   強制draggable只允許在指定元素或區(qū)域的范圍內(nèi)移動，可選值：'parent', 'document', 'window', [x1, y1, x2, y2].   
  44.   初始：$('.selector').draggable({ containment: 'parent' });   
  45.   獲�。�var containment = $('.selector').draggable('option', 'containment');   
  46.   設(shè)置：$('.selector').draggable('option', 'containment', 'parent');   
  47.   
  48. cursor : String : 'auto'  
  49.   指定在做拖拽動作時，鼠標(biāo)的CSS樣式。   
  50.   初始：$('.selector').draggable({ cursor: 'crosshair' });   
  51.   獲�。�var cursor = $('.selector').draggable('option', 'cursor');   
  52.   設(shè)置：$('.selector').draggable('option', 'cursor', 'crosshair');   
  53.   
  54. cursorAt : Object : false  
  55.   當(dāng)開始移動時，鼠標(biāo)定位在的某個位置上（最多兩個方向）�？蛇x值：{ top, left, right, bottom }.   
  56.   初始：$('.selector').draggable({ cursorAt: { left: 5 } });   
  57.   獲�。�var cursorAt = $('.selector').draggable('option', 'cursorAt');   
  58.   設(shè)置：$('.selector').draggable('option', 'cursorAt', { left: 5 });   
  59.   
  60. delay : Integer : 0   
  61.   當(dāng)鼠標(biāo)點下后，延遲指定時間后才開始激活拖拽動作（單位：毫秒）。此選項可以用來防止不想要的拖累元素時的誤點擊。   
  62.   初始：$('.selector').draggable({ delay: 500 });   
  63.   獲取：var delay = $('.selector').draggable('option', 'delay');   
  64.   設(shè)置：$('.selector').draggable('option', 'delay', 500);   
  65.   
  66. distance : Integer : 1   
  67.   當(dāng)鼠標(biāo)點下后，只有移動指定像素后才開始激活拖拽動作。   
  68.   初始：$('.selector').draggable({ distance: 30 });   
  69.   獲�。�var distance = $('.selector').draggable('option', 'distance');   
  70.   設(shè)置：$('.selector').draggable('option', 'distance', 30);   
  71.   
  72. grid : Array : false    
  73.   拖拽元素時，只能以指定大小的方格進行拖動。可選值：[x,y]   
  74.   初始：$('.selector').draggable({ grid: [50, 20] });   
  75.   獲�。�var grid = $('.selector').draggable('option', 'grid');   
  76.   設(shè)置：$('.selector').draggable('option', 'grid', [50, 20]);   
  77.   
  78. handle : Element, Selector : false    
  79.   限制只能在拖拽元素內(nèi)的指定元素開始拖拽。   
  80.   初始：$('.selector').draggable({ handle: 'h2' });   
  81.   獲�。�var handle = $('.selector').draggable('option', 'handle');   
  82.   設(shè)置：$('.selector').draggable('option', 'handle', 'h2');   
  83.   
  84. helper : String, Function : 'original'  
  85.   拖拽元素時的顯示方式。（如果是函數(shù)，必須返回值是一個DOM元素）可選值：'original', 'clone', Function    
  86.   初始：$('.selector').draggable({ helper: 'clone' });   
  87.   獲�。�var helper = $('.selector').draggable('option', 'helper');   
  88.   設(shè)置：$('.selector').draggable('option', 'helper', 'clone');   
  89.   
  90. iframeFix : Boolean, Selector : false  
  91.   可防止當(dāng)mouseover事件觸發(fā)拖拽動作時，移動過iframes并捕獲到它（內(nèi)部內(nèi)容），如果設(shè)置成true，則屏蔽層會覆蓋頁面的iframe。如果設(shè)置成對應(yīng)的選擇器，則屏蔽層會覆蓋相匹配的iframe。   
  92.   初始：$('.selector').draggable({ iframeFix: true });   
  93.   獲�。�var iframeFix = $('.selector').draggable('option', 'iframeFix');   
  94.   設(shè)置：$('.selector').draggable('option', 'iframeFix', true);   
  95.   
  96. opacity : Float : false  
  97.   當(dāng)元素開始拖拽時，改變元素的透明度。   
  98.   初始：$('.selector').draggable({ opacity: 0.35 });   
  99.   獲�。�var opacity = $('.selector').draggable('option', 'opacity');   
  100.   設(shè)置：$('.selector').draggable('option', 'opacity', 0.35);   
  101.   
  102. refreshPositions : Boolean : false  
  103.   如果設(shè)置成true，所有移動過程中的坐標(biāo)都會被記錄。（注意：此功能將影響性能）   
  104.   初始：$('.selector').draggable({ refreshPositions: true });   
  105.   獲�。�var refreshPositions = $('.selector').draggable('option', 'refreshPositions');   
  106.   設(shè)置：$('.selector').draggable('option', 'refreshPositions', true);   
  107.   
  108. revert : Boolean, String : false  
  109.   當(dāng)元素拖拽結(jié)束后，元素回到原來的位置。   
  110.   初始：$('.selector').draggable({ revert: true });   
  111.   獲�。�var revert = $('.selector').draggable('option', 'revert');   
  112.   設(shè)置：$('.selector').draggable('option', 'revert', true);   
  113.   
  114. revertDuration : Integer : 500   
  115.   當(dāng)元素拖拽結(jié)束后，元素回到原來的位置的時間。（單位：毫秒）   
  116.   初始：$('.selector').draggable({ revertDuration: 1000 });   
  117.   獲�。�var revertDuration = $('.selector').draggable('option', 'revertDuration');   
  118.   設(shè)置：$('.selector').draggable('option', 'revertDuration', 1000);   
  119.   
  120. scope : String : 'default'  
  121.   設(shè)置元素只允許拖拽到具有相同scope值的元素。   
  122.   初始：$('.selector').draggable({ scope: 'tasks' });   
  123.   獲�。�var scope = $('.selector').draggable('option', 'scope');   
  124.   設(shè)置：$('.selector').draggable('option', 'scope', 'tasks');   
  125.   
  126. scroll : Boolean : true  
  127.   如果設(shè)置為true，元素拖拽至邊緣時，父容器將自動滾動。   
  128.   初始：$('.selector').draggable({ scroll: false });   
  129.   獲取：var scroll = $('.selector').draggable('option', 'scroll');   
  130.   設(shè)置：$('.selector').draggable('option', 'scroll', false);   
  131.   
  132. scrollSensitivity : Integer : 20   
  133.   當(dāng)元素拖拽至邊緣時，父窗口一次滾動的像素。   
  134.   初始：$('.selector').draggable({ scrollSensitivity: 40 });   
  135.   獲�。�var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');   
  136.   設(shè)置：$('.selector').draggable('option', 'scrollSensitivity', 40);   
  137.   
  138. scrollSpeed : Integer : 20   
  139.   當(dāng)元素拖拽至邊緣時，父窗口滾動的速度。   
  140.   初始：$('.selector').draggable({ scrollSpeed: 40 });   
  141.   獲�。�var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');   
  142.   設(shè)置：$('.selector').draggable('option', 'scrollSpeed', 40);   
  143.   
  144. snap : Boolean, Selector : false  
  145.   當(dāng)設(shè)置為true或元素標(biāo)簽時，元素拖動到其它元素的邊緣時，會自動吸附其它元素。   
  146.   初始：$('.selector').draggable({ snap: 'span' });   
  147.   獲取：var snap = $('.selector').draggable('option', 'snap');   
  148.   設(shè)置：$('.selector').draggable('option', 'snap', 'span');   
  149.   
  150. snapMode : String : 'both'  
  151.   確定拖拽的元素吸附的模式。可選值：'inner', 'outer', 'both'  
  152.   初始：$('.selector').draggable({ snapMode: 'outer' });   
  153.   獲�。�var snapMode = $('.selector').draggable('option', 'snapMode');   
  154.   設(shè)置：$('.selector').draggable('option', 'snapMode', 'outer');   
  155.   
  156. snapTolerance : Integer : 20   
  157.   確定拖拽的元素移動至其它元素多少像素的距離時，發(fā)生吸附的動作。   
  158.   初始：$('.selector').draggable({ snapTolerance: 40 });   
  159.   獲�。�var snapTolerance = $('.selector').draggable('option', 'snapTolerance');   
  160.   設(shè)置：$('.selector').draggable('option', 'snapTolerance', 40);   
  161.   
  162. stack : Object : false  
  163.   Controls the z-Index of the defined group (key 'group' in the hash, accepts jQuery selector) automatically, always brings to front the dragged item. Very useful in things like window managers. Optionally, a 'min' key can be set, so the zIndex cannot go below that value.   
  164.   初始：$('.selector').draggable({ stack: { group: 'products', min: 50 } });   
  165.   獲�。�var stack = $('.selector').draggable('option', 'stack');   
  166.   設(shè)置：$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });   
  167.   
  168. zIndex : Integer : false  
  169.   控制當(dāng)拖拽元素時，改變元素的z-index值。   
  170.   初始：$('.selector').draggable({ zIndex: 2700 });   
  171.   獲取：var zIndex = $('.selector').draggable('option', 'zIndex');   
  172.   設(shè)置：$('.selector').draggable('option', 'zIndex', 2700);   
  173.   
  174.   
  175. ·事件   
  176. start   
  177.   當(dāng)鼠標(biāo)開始拖拽時，觸發(fā)此事件。   
  178.   初始：$('.selector').draggable({ start: function(event, ui){...} });   
  179.   綁定：$('.selector').bind('dragstart', function(event, ui){...});   
  180.   
  181. drag   
  182.   當(dāng)鼠標(biāo)拖拽移動時，觸發(fā)此事件。   
  183.   初始：$('.selector').draggable({ drag: function(event, ui){...} });   
  184.   綁定：$('.selector').bind('drag', function(event, ui){...});   
  185.   
  186. stop   
  187.   當(dāng)鼠標(biāo)松開時，觸發(fā)此事件。   
  188.   初始：$('.selector').draggable({ stop: function(event, ui){...} });   
  189.   綁定：$('.selector').bind('dragstop', function(event, ui){...});   
  190.   
  191.   
  192. ·方法   
  193. destory   
  194.   從元素中移除拖拽功能。   
  195.   用法：.draggable( 'destroy' )   
  196.   
  197. disable   
  198.   禁用元素的拖拽功能。   
  199.   用法：.draggable( 'disable' )   
  200.   
  201. enable   
  202.   啟用元素的拖拽功能。   
  203.   用法：.draggable( 'enable' )   
  204.   
  205. option   
  206.   獲取或設(shè)置元素的參數(shù)。   
  207.   用法：.draggable( 'option' , optionName , [value] )
    html編輯器
    (73)html編輯器
    我們做網(wǎng)頁的時候最難找的就是編輯器,網(wǎng)上找一個吧,要不是圖片上傳錯誤,就是到處都是錯誤,垃圾太多.大家都需要一個簡單,速度快的.西西為您提供最好用的編輯器一站式下載編輯器定義編輯器指的是一類編輯制作工具，可自定義窗囗，編輯主題索引，可選擇添搜索頁，無任何不自由。編輯器哪個好用小編個人比較喜歡使用和，這兩款編輯器軟件都有不錯的表現(xiàn)。至于編輯器哪個好用，這就要根據(jù)你的個人需求去選擇對應(yīng)的編輯器啦...更多>>
    • UltraEdit-32中文版21.20.1001 中文

      06-29 / 19.5M

      推薦理由：ultraEdit 32 破解版 簡體中文 內(nèi)有安裝說明，完全免費，無試用期的。該軟件功能強大，能打開各種格式的文件
    • pyscripter x642.5.3 官方最新版

      11-10 / 4.7M

      推薦理由：python編輯器，代碼補全、參數(shù)提示補全工具，這個工具其實非常重要，可以大大提高開發(fā)效率，減少出錯。很滿
    • 快手AAuto Studio10.152 綠色中文免

      02-20 / 8.5M

      推薦理由：快手aauto是由一鶴軟件耗時四年開發(fā)新一代編程語言。完美支持靜態(tài)類型、動態(tài)類型，完美支持com、dllapi、re
    • ultraedit64位破解版v22.20.0.49 綠

      03-31 / 37.9M

      推薦理由：UltraEdit是最強大的一款超值文本編輯器！ultraedit64位破解版，適用于Windows64位系統(tǒng)使用，此版為綠色破解
    • Dreamweaver cs6中文版官方原版

      11-19 / 279.7M

      推薦理由：AdobeDreamweaverCS6是AdobeCreativeSuite6系列中的HTML編輯器和網(wǎng)頁設(shè)計軟件，是最優(yōu)秀的可視化網(wǎng)頁設(shè)計工
    • Adobe Dreamweaver CS5官方簡體中文

      05-15 / 436.8M

      推薦理由：Adobe Dreamweaver CS5 軟件使設(shè)計人員和開發(fā)人員能充滿自信地構(gòu)建基于標(biāo)準(zhǔn)的網(wǎng)站。由于同新的 Adobe CS Li
    dreamweaver cs6
    (14)dreamweaver cs6
    新版本使用了自適應(yīng)網(wǎng)格版面創(chuàng)建頁面，在發(fā)布前使用多屏幕預(yù)覽審閱設(shè)計,可大大提高工作效率。改善的性能，更高效地傳輸大型文件。實時視圖和多屏幕預(yù)覽面板可呈現(xiàn)代碼，更能夠檢查自己的工作。曾經(jīng)風(fēng)靡一時的網(wǎng)頁三劍客成員之一是目前應(yīng)用最廣的網(wǎng)頁制作軟件，原本是由公司所開發(fā)的著名網(wǎng)站開發(fā)工具，隨被收購后，改名為。它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，以及在之后推出的針對專業(yè)網(wǎng)頁圖像設(shè)計的，三者...更多>>
    • Dreamweaver cs6中文版官方原版

      11-19 / 279.7M

      推薦理由：AdobeDreamweaverCS6是AdobeCreativeSuite6系列中的HTML編輯器和網(wǎng)頁設(shè)計軟件，是最優(yōu)秀的可視化網(wǎng)頁設(shè)計工
    • Dreamweaver cc amtlib.dll補丁

      07-05 / 834KB

      推薦理由：Adobe Dreamweaver CC 13.0 build 6390多語言正式版的破解補丁，破解后程序不再提示剩余天數(shù)與激活注冊。關(guān)
    • Dreamweaver CS5 HTML 5 擴展包

      06-22 / 5.7M

      推薦理由：安裝了該擴展后再也不用擔(dān)心不記得難記的css3樣式代碼了！ 剛裝 Dreamweaver CS5 的時候，發(fā)現(xiàn)新建文檔的時
    • Dreamweaver插件包西西整理

      01-08 / 2.7M

      推薦理由：西西小編整理的一些比較常用的Dreamweaver插件，希望能對大家有所幫助！persistent_layers 不管滾動條如何拉
    • Adobe Dreamweaver CS4中文精簡版

      04-11 / 84.5M

      推薦理由：使用業(yè)界領(lǐng)先的Web 創(chuàng)作工具之一構(gòu)建世界級的網(wǎng)站和應(yīng)用程序。Adobe® Dreamweaver® CS4 軟件是 W
    • Dreamweaver jQuery智能提示插件1.

      07-31 / 109KB

      推薦理由：1.2.0版本插件在1.0.0插件基礎(chǔ)上進一步修改，版權(quán)信息僅保留致謝信息，刪除作者為了代碼整體提示美觀度，故

    相關(guān)文章

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂頂
    • 1 難過難過
    • 5 囧囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)