DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> 用jQuery UI的droppable拖放元素
用jQuery UI的droppable拖放元素
編輯:JQuery常見問題     

先看droppable的一個例子:http:///a/bjad/760qp325.htm

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: 設置控件的層次.
·概述
配合draggable插件,允許拖放到任何DOM元素內。


所有的事件回調函數都有兩個參數:event和ui,浏覽器自有event對象,和經過封裝的ui對象
ui.draggable - 表示當前被拖拽的元素的JQuery對象
ui.helper - 表示當前被拖放的元素的JQuery對象
ui.position - 表示當前被拖拽的相對坐標值對象{top,left}
ui.offset - 表示當前被拖拽的元素的絕對坐標值對象{top,left}

·參數(參數名 : 參數類型 : 默認值)
accept : Selector, Function : '*'
僅允許符合適配器的元素激活拖放的事件。(如果是函數,則此函數會在頁面上所有元素被調用,函數的返回值必須是布爾值。)
初始:$('.selector').droppable({ accept: '.special' });
獲取:var accept = $('.selector').droppable('option', 'accept');
設置:$('.selector').droppable('option', 'accept', '.special');

activeClass : String : false
如果設置值,則當有拖拽事件發生時,為頁面上所有允許(accept)的元素添加此樣式。
初始:$('.selector').droppable({ activeClass: 'ui-state-highlight' });
獲取:var activeClass = $('.selector').droppable('option', 'activeClass');
設置:$('.selector').droppable('option', 'activeClass', 'ui-state-highlight');

addClasses : Boolean : true
設置為false,可以阻止ui-droppable樣式添加至可拖放的對象。(這樣可以獲取一定的性能優化)
初始:$('.selector').droppable({ addClasses: false });
獲取:var addClasses = $('.selector').droppable('option', 'addClasses');
設置:$('.selector').droppable('option', 'addClasses', false);

greedy : Boolean : false
是否防止嵌套的droppable事件被傳播。
初始:$('.selector').droppable({ greedy: true });
獲取:var greedy = $('.selector').droppable('option', 'greedy');
設置:$('.selector').droppable('option', 'greedy', true);

hoverClass : String : false
當拖拽元素移至帶有可拖放插件的元素上時,為元素添加指定的樣式。
初始:$('.selector').droppable({ hoverClass: 'drophover' });
獲取:var hoverClass = $('.selector').droppable('option', 'hoverClass');
設置:$('.selector').droppable('option', 'hoverClass', 'drophover');

scope : String : 'default'
設置元素只允許具有相同scope值拖拽元素激活此拖放元素。
初始:$('.selector').droppable({ scope: 'tasks' });
獲取:var scope = $('.selector').droppable('option', 'scope');
設置:$('.selector').droppable('option', 'scope', 'tasks');

tolerance : String : 'intersect'
判斷一個可拖拽元素被【放到】一個可拖放元素的判斷模式。(可選值:'fit', 'intersect', 'pointer', 'touch')
fit:拖拽元素完全覆蓋拖放元素
intersect:拖拽元素至少50%覆蓋拖放元素
pointer:鼠標指針重疊在可拖放元素上
touch:只要有任何重疊即發生
初始:$('.selector').droppable({ tolerance: 'fit' });
獲取:var tolerance = $('.selector').droppable('option', 'tolerance');
設置:$('.selector').droppable('option', 'tolerance', 'fit');


·事件
activate
當任何可拖拽元素開始拖拽動作時激活此事件。
初始:$('.selector').droppable({ activate: function(event, ui) { ... } });
綁定:$('.selector').bind('dropactivate', function(event, ui) { ... });

deactivate
當任何可拖拽元素停止拖拽動作時激活此事件。
初始:$('.selector').droppable({ deactivate: function(event, ui) { ... } });
綁定:$('.selector').bind('dropdeactivate', function(event, ui) { ... });

over
當一個被允許(accept)的可拖拽元素移動並覆蓋可拖放元素時激活。
初始:$('.selector').droppable({ over: function(event, ui) { ... } });
綁定:$('.selector').bind('dropover', function(event, ui) { ... });

out
當一個被允許(accept)的可拖拽元素移出可拖放元素時激活。
初始:$('.selector').droppable({ out: function(event, ui) { ... } });
綁定:$('.selector').bind('dropout', function(event, ui) { ... });

drop
當一個被允許(accept)的可拖拽元素移動並覆蓋可拖放元素,松開鼠標時激活。
初始:$('.selector').droppable({ drop: function(event, ui) { ... } });
綁定:$('.selector').bind('drop', function(event, ui) { ... });


·方法
destory
從元素中移除拖拽功能。
用法:.droppable( 'destroy' )

disable
禁用元素的拖拽功能。
用法:.droppable( 'disable' )

enable
啟用元素的拖拽功能。
用法:.droppable( 'enable' )

option
獲取或設置元素的參數。
用法:.droppable( 'option' , optionName , [value] )
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved