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

首頁(yè) → 編程開(kāi)發(fā) → javascript|JQuery → JQuery UI - draggable參數(shù)中文詳細(xì)說(shuō)明

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

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

作者：西西點(diǎn)擊：882次評(píng)論：0次標(biāo)簽： JQuery

  • 類(lèi)型：編程輔助大�。�109KB語(yǔ)言：中文 評(píng)分：5.0
  • 標(biāo)簽：
立即下載
  1. ·概述   
  2. 在任何DOM元素啟用拖動(dòng)功能。通過(guò)單擊鼠標(biāo)并拖動(dòng)對(duì)象在窗口內(nèi)的任何地方移動(dòng)。   
  3. 官方示例地址：http://jqueryui.com/demos/draggable/  
  4.   
  5. 所有的事件回調(diào)函數(shù)都有兩個(gè)參數(shù)：event和ui，瀏覽器自有event對(duì)象，和經(jīng)過(guò)封裝的ui對(duì)象   
  6. ui.helper - 表示被拖拽的元素的JQuery對(duì)象   
  7. ui.position - 表示相對(duì)當(dāng)前對(duì)象，鼠標(biāo)的坐標(biāo)值對(duì)象{top,left}   
  8. ui.offset - 表示相對(duì)于當(dāng)前頁(yè)面，鼠標(biāo)的坐標(biāo)值對(duì)象{top,left}   
  9.   
  10. ·參數(shù)（參數(shù)名 : 參數(shù)類(lèi)型 : 默認(rèn)值）   
  11. addClasses : Boolean : true  
  12.   如果設(shè)置成false，將在加載時(shí)阻止ui-draggable樣式的加載。   
  13.   當(dāng)有很多對(duì)象要加載draggable()插件的情況下，這將對(duì)性能有極大的優(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.   約束拖動(dòng)的動(dòng)作只能在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.   防止在指定的對(duì)象上開(kāi)始拖動(dòng)。   
  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中，如果使用此選項(xiàng)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.   強(qiáng)制draggable只允許在指定元素或區(qū)域的范圍內(nèi)移動(dòng)，可選值：'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.   指定在做拖拽動(dòng)作時(shí)，鼠標(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)開(kāi)始移動(dòng)時(shí)，鼠標(biāo)定位在的某個(gè)位置上（最多兩個(gè)方向）。可選值：{ 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)點(diǎn)下后，延遲指定時(shí)間后才開(kāi)始激活拖拽動(dòng)作（單位：毫秒）。此選項(xiàng)可以用來(lái)防止不想要的拖累元素時(shí)的誤點(diǎn)擊。   
  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)點(diǎn)下后，只有移動(dòng)指定像素后才開(kāi)始激活拖拽動(dòng)作。   
  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.   拖拽元素時(shí)，只能以指定大小的方格進(jìn)行拖動(dòng)�？蛇x值：[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)的指定元素開(kā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í)的顯示方式。（如果是函數(shù)，必須返回值是一個(gè)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ā)拖拽動(dòng)作時(shí)，移動(dòng)過(guò)iframes并捕獲到它（內(nèi)部?jī)?nèi)容），如果設(shè)置成true，則屏蔽層會(huì)覆蓋頁(yè)面的iframe。如果設(shè)置成對(duì)應(yīng)的選擇器，則屏蔽層會(huì)覆蓋相匹配的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)元素開(kāi)始拖拽時(shí)，改變?cè)氐耐该鞫取?  
  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，所有移動(dòng)過(guò)程中的坐標(biāo)都會(huì)被記錄。（注意：此功能將影響性能）   
  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é)束后，元素回到原來(lái)的位置。   
  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é)束后，元素回到原來(lái)的位置的時(shí)間。（單位：毫秒）   
  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，元素拖拽至邊緣時(shí)，父容器將自動(dòng)滾動(dòng)。   
  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)元素拖拽至邊緣時(shí)，父窗口一次滾動(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)元素拖拽至邊緣時(shí)，父窗口滾動(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)簽時(shí)，元素拖動(dòng)到其它元素的邊緣時(shí)，會(huì)自動(dòng)吸附其它元素。   
  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.   確定拖拽的元素吸附的模式�？蛇x值：'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.   確定拖拽的元素移動(dòng)至其它元素多少像素的距離時(shí)，發(fā)生吸附的動(dòng)作。   
  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)拖拽元素時(shí)，改變?cè)氐膠-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)開(kāi)始拖拽時(shí)，觸發(fā)此事件。   
  178.   初始：$('.selector').draggable({ start: function(event, ui){...} });   
  179.   綁定：$('.selector').bind('dragstart', function(event, ui){...});   
  180.   
  181. drag   
  182.   當(dāng)鼠標(biāo)拖拽移動(dòng)時(shí)，觸發(fā)此事件。   
  183.   初始：$('.selector').draggable({ drag: function(event, ui){...} });   
  184.   綁定：$('.selector').bind('drag', function(event, ui){...});   
  185.   
  186. stop   
  187.   當(dāng)鼠標(biāo)松開(kāi)時(shí)，觸發(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)頁(yè)的時(shí)候最難找的就是編輯器,網(wǎng)上找一個(gè)吧,要不是圖片上傳錯(cuò)誤,就是到處都是錯(cuò)誤,垃圾太多.大家都需要一個(gè)簡(jiǎn)單,速度快的.西西為您提供最好用的編輯器一站式下載編輯器定義編輯器指的是一類(lèi)編輯制作工具，可自定義窗囗，編輯主題索引，可選擇添搜索頁(yè)，無(wú)任何不自由。編輯器哪個(gè)好用小編個(gè)人比較喜歡使用和，這兩款編輯器軟件都有不錯(cuò)的表現(xiàn)。至于編輯器哪個(gè)好用，這就要根據(jù)你的個(gè)人需求去選擇對(duì)應(yīng)的編輯器啦...更多>>
    • UltraEdit-32中文版21.20.1001 中文

      06-29 / 19.5M

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

      11-10 / 4.7M

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

      02-20 / 8.5M

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

      03-31 / 37.9M

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

      11-19 / 279.7M

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

      05-15 / 436.8M

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

      11-19 / 279.7M

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

      07-05 / 834KB

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

      06-22 / 5.7M

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

      01-08 / 2.7M

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

      04-11 / 84.5M

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

      07-31 / 109KB

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

    相關(guān)文章

    相關(guān)評(píng)論

    閱讀本文后您有什么感想? 已有人給出評(píng)價(jià)!

    • 8 喜歡喜歡
    • 3 頂頂
    • 1 難過(guò)難過(guò)
    • 5 囧囧
    • 3 圍觀圍觀
    • 2 無(wú)聊無(wú)聊

    熱門(mén)評(píng)論

    最新評(píng)論

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

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