[C++學習筆記]event物件

Win32之中最具有彈性的同步機制就屬events物件了。Event物件是一種核心物件，它唯一目的就是成為激發狀態或為激發狀態。

SetEvent() ： 把 event物件設為激發狀態。
ResetEvent() ： 把event 物件設為非激發狀態
PulseEvent() ： 如果是一個
Manual Reset Event：把event物件設為激發狀態，喚醒『所有』等待中的執行緒， 然後event恢復為非激發。
如果一個Auto Reset Event：把event物件設為激發狀態，喚醒『一個』等待中的執行緒，然後event恢復為非激發狀態。

Event物件被運用在多種型態的高級 I/0動作, Event物件也可以用來設計你自己的同步物件。
你可以呼叫CreateEvent()來產生一個event物件。

HANDLE CreateEvent(
LPSECURITY＿ATTRIBUTES IpEventAttributes,
BOOL bManuaIReset，
BOOL bInitialState，
LPCTSTR IpName

);

參數

IpEventAttributes：安全防護性，NULL表示使用預設屬性，此屬性Windows95會被忽略。

bManualRest：如為FALSE，表示這個event將在變成激發狀態態的event重置為非激發狀態。
(因而喚醒一個執行緒)之後，自動重置reset)為非激發狀態。如果是TRUE，表示不會自動重置，必防護屬性。NU比表示使用預設屬性。此屬性須靠程式動作(呼叫ResetEvent())才能將激發狀

bIntialState：如為TRUE，表示這個event一開始處於激發狀態。如為FALSE，表示這個event一開始處於非激發狀態。

lpName：Event物件的名稱。任何執行緒或行程都可以根據這個文字名稱，使用此一event物件。


回傳值

如果呼叫成功，會傳回一個 eventhandle , GetLastError()會傳回 0。如果lpName所指定的 event物件已經存在，CreateEvent()傳回的是該eventhandle，而不會產生新的一個。這時候 GetLastError()會傳回ERROR＿ALREADY＿EXISTS。如果 CreateEvent()失敗，傳回的是 NULL，GetLastError()可以獲得更進一步的失敗資訊。

[C++學習筆記]Windows 程式設計模型

在傳統的作業系統裡，程式採用的是程序設計模型(procedural programming model)，什麼是程序設計模型呢？程序設計模型指的是程式會按照順序由上而下的執行。例如在傳統的C語言裡，程式會從main函式的第一行開始執行到main的最後一行，雖然中間有可能會因為user輸入的東西不同，進入不同的function，但是我們還是可以大概了解程式的執行過程。在傳統的這種C程式裡，呼叫函式是由這個程式的main來決定的。

 

Windows 程式的運作程式和傳統的方法不一樣，Windows程式的運作是採用事件驅動(event-driven)的模型，「事件」(event)就是敲一下鍵盤或是按一下滑鼠這些動作。

我們可以把WinMain當成Windows程式的main function ，WinMain會先建立視窗之後進入訊息迴圈(message loop)，訊息迴圈會不斷的收取訊息，再把訊息分配給視窗程式裡，再由視窗程式來負責處理送到視窗的訊息。

 

什麼是訊息呢？訊息從哪裡來？又代表什麼意義呢？Windows定義了許多不同的訊息型態，大部分的訊息名稱，都是由「WM_」開頭的，如下表：

訊息	意義
WM_CHAR	從鍵盤輸入字元
WM_CREATE	建立視窗的時候
WM_DESTROY	視窗被摧毀的時候
WM_LBUTTONDOWN	按下滑鼠左鍵
WM_LBUTTONUP	放開滑鼠左鍵
WM_MOUSEMOVE	移動滑鼠時
WM_PAINT	重新繪製視窗
WM_QUIT	結束應用程式時
WM_SIZE	視窗大小改變時

 

舉個例子來說，當我們按下視窗程式右上角的「X」時，就會產生WM_QUIT的訊息。

訊息產生之後，就會被留在一個訊息佇列中，直到訊息被收取為止。

當視窗程式收取到WM_QUIT這個訊息的時候(代表應用程式應該要結束)，因此訊息迴圈會結束，訊息迴圈結束之後應用程式也會跟著結束。

 

視窗程式怎麼處理收到的訊息呢？通常視窗程式會呼叫其他的函式來處理收到的訊息，例如：Windows提供的API 函式或是程式裡的其他函式。

而Win32 API提供了很多函式，像是建立視窗、畫圖或是處理檔案等等。

[C++學習筆記]程式碼與介面

Windows程式可以分成兩個部分，「程式碼」和「介面」(UI, User Interface)，這兩部分會被整合為一個exe檔。

介面

介面是指工作列、警告視窗、程式的圖示，或是滑鼠指標的外觀等等，它們是.bmp、.ico等等的檔案，而成式的開發者會在一個「資源描述檔」(.rc)裡描述這些檔案，然後透過「RC編譯器」讀取這個「資源描述檔」(.rc檔)，把這些UI檔案(.bmp等)製作成一個.RES檔。

程式碼

程式碼則是透過C編譯器，致做出一個.OBJ檔。

 

最後將程式碼和介面結合，最後產生一個執行檔(.exe)，才是一個完整的Windows 程式。

[C++學習筆記]MFC常用基礎類別

CWnd

CWnd是許多類別的基礎類別，如：Cbutton和CDialog。

因此button、對話框、scroll bar等等，其實都算是一個「視窗」。



CWinApp

CWinApp這個類別是MFC程式的骨架，開始執行程式的時候，CWinApp就存在程式中。

而建構CWinApp時，會呼叫InitInstance()這個function，我們可以把這個function想像成C程式的main() function。



CSring

用於字串，可以讓許多操作變得更容易。

[C++學習筆記]用->還是用.

假設我們有一個類別Cbox

1	class Cbox
2	{
3	int length;
4	int width;
5	int height;
6	public:
7	draw();
8	}

使用draw()函式的方法：

1	Cbox *pbox;
2	Cbox candyBox;
3	pbox->draw();
4	candyBox.draw();

使用指標時必須使用間接成員存取運算子"->"

使用物件必須使用直接成員存取運算子"."

[C++學習筆記]Messages 和Handles

Message

視窗程式是以Message為基礎的，依靠Message的傳送和回應使得視窗程式能夠運作。

Message是一個32位元的數字。

當我們移動滑鼠時，Message (WM_MOUSEMOVE)就會被傳送到目前的視窗；當我們改變視窗位置時，Message(WM_MOVE)就會被傳送到目前的視窗。

這些Message會被排入Queue(佇列)中，視窗會將他們從Queue中取出，並進行對應的動作，若是視窗得到了WM_SIZE(改變視窗大小)的Message，視窗就會在螢幕上重新繪製。



Handles

視窗程式要使用Handles來判斷各個不同的視窗。

Handles是一個參考不同視窗物件的方法，我們可以將Handles想像成指向各個視窗的一種指標，Handles必須要在使用完之後銷毀，否則會使程式及系統當機。



Messages 和Handles的運作

假設我們擁有一個視窗，我們擁有視窗的Handles，我們將這個Handles命名為My_HWND。

如果作業系統要告知要重新繪製視窗，系統就會傳送一個Message

PostMessage(My_HWND, WM_PAINT, 0, 0);

這個function會傳出Handles和Message給視窗程式，而視窗程式則是一個巨大的switch….case，處理各種不同的訊息。

void HandleMessage(long Message) { switch(Message)   {   case WM_PAINT:     DrawWindows();     break;   case WM_SIZE:     //do something     break;   } }

[C++學習筆記]範圍解析運算子(scope resolution operator ::)

當區域變數名稱和全域變數名稱相同時，在區域變數名稱的範圍之內，全域變數會被隱藏，而我們可以透過範圍解析運算子: : (兩個冒號)來存取全域變數。

1	#include<iostream>
2	using std::cout;
3	using std::endl;
4	int num=100;
5	int main()
6	{
7	int num = 1;
8	cout <<"inner num: " <<num <<endl;
9	cout <<"global num: " <<::num <<endl;
10	return 0;
11	}

執行的結果是

inner num: 1

global num: 100

[C++學習筆記]2種標準的C++

	ISO/ANSI	C++/CLI
程式特性	可直接編譯成機器碼並在本機執行的程式碼。 未受控管的C++程式，因程式並沒有受到CLR的控制，必須自行處理記憶體的配置與釋放。	在CLR中執行的視窗程式，user必須安裝.NET Framework 在CLR中執行的程式碼，是受控管的C++(managed C++)，因為CLR會控制程式碼和資料，例如釋放自動配置的記憶體，這樣可以消除某些原生C++(native C++)程式產生的錯誤。
GUI開發	使用微軟機處類別(MFC)來開發式窗應用程式的圖形使用者介面，MFC封裝了Windows作業系統的圖形使用者介面，簡短了程式開發的步驟。 若是考慮到執行效能，也可以在程式碼中直接使用Windows API，但Windows API比C++還要更早發展，因此他不具有物件導向特性	可以使用由.NET Framework函式庫提供的Windows Froms做為GUI的基礎。若使用Windows Froms，程式開發者就可以使用圖形化的介面，快速的開發GUI，而程式碼則是自動產出的，開發者只須對自動產生的程式碼進行增修。

[C++學習筆記].NET Framework是什麼？

簡單來說，.NET Framework是一個能夠執行、開發.NET程式的平臺，如同軟體建構於硬體之上，.NET程式也必須依靠.NET Framework來執行。

.NET Framework包含兩個元素：

1. 1. CLR(Common Language Runtime)：可以提供VB、C#和C++等等高階語言撰寫、執行的標準化環境。
   2. 類別函式庫：支援各種程式碼所需的功能，也就是不需要考慮程式碼的語言是什麼，都可以使用相同的類別函式庫。因此只要是.NET程式都可以使用一樣的函式庫。

[Android]DroidDraw─Android視覺化GUI版型拖拉工具程式

DroidDraw─Android視覺化GUI版型拖拉工具程式

1.直接Link到http://www.droiddraw.org/ 進行編輯

2.下載

官方網站:http://www.droiddraw.org/

windows版本:http://droiddraw.googlecode.com/files/droiddraw-r1b14.zip 

[Android]建立Android Virtual Devices

1. 點選open the Android SDK and AVD Manager

2. 選 new 進行設定

3. 設定裝置名稱 ( 供自己識別 ) 、 SD 記憶卡容量 或   檔案路徑、螢幕預設解析度設定，設定完成點選Create AVD就完成模擬器的設置囉！

[Android]Android的環境建置

Android的環境建置包含了：
1.JDK的安裝
2.下載與使用Eclipse
3.安裝Eclipse的擴充套件ADT
4.下載並設定Android SDK

---

1.JDK的安裝

因為Android必須由Java語言來撰寫，所以我們要先安裝Java的開發套件(Java Development Kit, JDK)。
我們可以在Java的官方網站來下載JDK，
(1)滑鼠移到Downloads並點選Java for Developers

          
(2)選擇任一JDK版本進行Download
(目前已知JDK 6 Update 21在執行Eclipse上有一些小問題，詳見Eclipse官方說明)

          
          
(3)選擇作業系統版本、語言並勾選同意授權條款按下Continue 點選檔案名稱並下載

          
(4)安裝JDK，一直按下一步到最後

          
(5)最後是環境變數的設定
在「電腦」點選右鍵選內容，選擇「進階系統設定」，點選最下方的「環境變數按鈕」

          
選擇上方TEMP，在下方選擇Path並點選編輯，

          
打開之後，在變數的最後加上C:\glassfishv3\jdk\bin;C:\glassfishv3\jdk\lib;
(綠色的部分代表JDK安裝時的安裝路徑，如果有變更路徑就請更改綠色的部分)

          
設定完成之後需重新開機

2.下載並使用Eclipse

Eclipse官方網站下載Eclipse開發環境
(1)下載 Eclipse 時可以選擇Eclipse IDE for Java Developers或是Eclipse IDE for Java EE Developers這兩種。(因為只有這兩種版本才會安裝 Eclipse JDT 擴充套件)，
此處為安裝3.6之範例
          

(2)下載完畢之後，解壓縮以後就可以直接使用不必進行安裝
 3.安裝Eclipse的擴充套件ADT(以3.6為例)
(1)若是第一次開啟Eclipse，會出現這樣的畫面

          
要求user輸入工作的目錄，您可以建立或選擇適合的工作目錄
(2)選擇Help裡面的Install New Software...

          
(3)點選ADD

          
(4)在name輸入ADT，Location輸入網址http://dl-ssl.google.com/android/eclipse/site.xml 
點選OK

          
(5)將Developr Tools打勾並點選Next進行軟體安裝

          
4.下載並設定Android SDK
     (1)在Android 官方網站點選SDK，選擇適合版本下載，下載完畢後解壓縮

          
     (2)點選Windows選擇Preferences

          
     (3)點選左方Android，在右邊的SDK Location選擇剛剛解壓縮的SDK所在地，按下Apply就完成SDK的設定了

          

[javascript]RegExp

RegExp(regular expression)，指的是描述字元樣式的物件。
正規運算式常常以RegExp來表示，而正規運算式是由兩個斜線( / )中的字元所形成
例如：/s/指的是s字元


正規運算式的字元類別，

字元	比對
[...]	任一在方括號中的字元
	例如：/[abc]/指的是比對a或b或c任何一個字元
[^...]	任一不在方括號中的字元
	例如：/[^abc]/比對a或b或c以外的字元
.	除了換行或結束字元的所有字元
\w	任意文字字元，等同於[a-zA-Z0-9_]
\W	任意非文字字元，等同於[^a-zA-Z0-9_]
\s	任意空白字元
	例如：/\s/是比對所有空白字元
\d	任意數字，等同於[0-9]
\D	任意非數字，等同於[^0-9]

更多參考資料：

包含RegExp觀念及測試工具

http://blog.roodo.com/rocksaying/archives/2670695.html

投影片及大量範例

http://irw.ncut.edu.tw/peterju/webslide/re/

[jQuery]實作JQuery UI drag and drop

實作drag and drop：
將drag目標拖曳至drop目標時，內容會互換。

var $a_droppableObject,b_draggableObject_html,$b_droppableObject,a_draggableObject_html; $('.drop').droppable({ scope:'sc', torlerance:'pointer', over:function(e,ui){ $(this).css('background-color', '#90F'); b_draggableObject_html = $(this).html(); $b_droppableObject =$(this); }, out:function(e,ui){ $(this).css('background-color', '#FFC'); }, drop:function(e,ui){ $(this).css('background-color', '#FFF').siblings().css('background-color', '#FFC'); if(b_draggableObject_html!='' && a_draggableObject_html!='') { $b_droppableObject.html(a_draggableObject_html); $a_droppableObject.html(b_draggableObject_html); $a_droppableObject.children().removeClass().addClass('drag').draggable({ addClass:false, revert:'invalid', scope:'sc', stack:".drag", helper:'clone', opacity:0.35, start:function(e,ui){ a_draggableObject_html = $(this).parent().html(); $a_droppableObject = $(this).parent(); }//end of start }); //end of draggable function $b_droppableObject.children().removeClass().addClass('drag').draggable({ addClass:false, revert:'invalid', scope:'sc', stack:".drag", helper:'clone', opacity:0.35, start:function(e,ui){ a_draggableObject_html = $(this).parent().html(); $a_droppableObject = $(this).parent(); }//end of start }); //end of draggable function //remove clone object $b_droppableObject.children().each(function(){ if($(this).css('opacity')==0.35) $(this).remove(); }); $b_droppableObject=null; $a_droppableObject=null; b_draggableObject_html=''; a_draggableObject_html=''; }//end if function } }); $('.drag').draggable({ addClass:false, revert:'invalid', scope:'sc', stack:".drag", helper:'clone', opacity:0.35, start:function(e,ui){ a_draggableObject_html = $(this).parent().html(); $a_droppableObject = $(this).parent(); }//end of start });

[javascript]判斷數字/非數字

判斷數字

isFinite()

判斷一個數字是否為有限的

[用法]

isFinite(n)

[參數]

n 要檢測的數字

[傳回值]

true 如果n是有限數字(或者可以轉換成有限數字) false 如果n是非數字(NaN)，或是正、負無窮大的數

判斷非數字

isNaN()

檢測非數字值

[用法]

isNaN(x)

[參數]

x 要檢測的值

[傳回值]

true 如果x是特殊的非數字值(或者能被轉成這樣的值) false x傳回是其他值

[jQuery]UI/API/1.8/Droppable

UI/API/1.8/Droppable

綜述

jQuery的UI Droppable plugin 讓選定元素具有droppable的屬性（意思就是他們可以接受被draggables放開的元素)。你也可以指定要接受哪些draggable放開的元素。

所有的回調（start, stop, drag）接受兩個參數：原始的瀏覽器事件(event)，ui對象，參考以下的內容：

• ui.draggable -目前可以被拖曳的元素，是一個jQuery物件
• ui.helper -當前可拖放助手，是一個jQuery物件
• ui.position -draggable helper目前的位置{ top: , left: }
• ui.offset -draggable helper目前的絕對位置{ top: , left: }

選項

disable

型態：Boolean 預設值:false

禁用（true）或允許（false）物件droppable屬性。 可以在初始化的時候設定（第一次創建）draggable。

Code examples

初始化droppable物件的 disabled選項

$( ".selector" ).droppable({ disabled: true });

在初始化之後取得或設定disabled選項

//獲取 var disabled = $( ".selector" ).droppable( "option", "disabled" ); //設定 $( ".selector" ).droppable( "option", "disabled", true );

accept

型態：Selector, Function 預設值:'*'

droppable會接受所有selector選擇的draggable物件。 如果參數為Function，每一次draggable的時候都會呼叫這個指定的Function。 如果這個draggable動作是可以被接受的，那麼這個Function就要回傳true。

Code examples

初始化droppable物件的accept選項

$( ".selector" ).droppable({ accept: '.special' });

在初始化之後取得或設定accept選項

//獲取 var accept = $( ".selector" ).droppable( "option", "accept" ); //設定 $( ".selector" ).droppable( "option", "accept", '.special' );

activeClass

型態：String 預設值:false

當draggable正在執行的時候，指定的activeClass會被加入。

Code examples

初始化droppable物件的activeClass選項

$( ".selector" ).droppable({ activeClass: 'ui-state-highlight' });

在初始化之後取得或設定activeClass選項

//獲取 var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); //設定 $( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );

           

addClasses

型態：Boolean 預設值:true

如果參數設定為false，就不會增加 ui-draggable 這個類別。 這是以效能最佳化作為目標 。draggable() 會對許多元素作初始化。

Code examples

初始化droppable物件的addClasses選項

$( ".selector" ).droppable({ addClasses: false });

在初始化之後取得或設定addClasses選項

//獲取 var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); //設定 $( ".selector" ).droppable( "option", "addClasses", false );

greedy

型態：Boolean 預設值:false

如果參數設定為true，則不允許巢狀的droppable。 舉例來說，若有兩層div物件(都是droppable的)，將一個draggable物件拖曳至內層div時， 參數設定為true則外層不會觸發dropped，若參數設定為false則外層會觸發dropped。

Code examples

初始化droppable物件的greedy選項

$( ".selector" ).droppable({ greedy: true });

在初始化之後取得或設定greedy選項

//獲取 var greedy = $( ".selector" ).droppable( "option", "greedy" ); //設定 $( ".selector" ).droppable( "option", "greedy", true );

hoverClass

型態：String 預設值:false

如果指定了這個參數， 拖曳draggable物件經過至droppable物件上方的時候，指定的class會增加到droppable物件上。

Code examples

初始化droppable物件的hoverClass選項

$( ".selector" ).droppable({ hoverClass: 'drophover' });

在初始化之後取得或設定hoverClass選項

//獲取 var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); //設定 $( ".selector" ).droppable( "option", "hoverClass", 'drophover' );

scope

型態：String 預設值:'default'

用於配對draggable物件和droppable物件。 除了droppable指定的accept物件以外， 和droppable擁有相同scope的draggable物件也同樣可以被droppable物件接受。

Code examples

初始化droppable物件的scope選項

$( ".selector" ).droppable({ scope: 'tasks' });

在初始化之後取得或設定scope選項

//獲取 var scope = $( ".selector" ).droppable( "option", "scope" ); //設定 $( ".selector" ).droppable( "option", "scope", 'tasks' );

tolerance

型態：String 預設值:'tolerance'

選擇一種模式，來判斷一個draggable物件是否有"經過"一個droppable物件。 可接受的參數：'fit', 'intersect', 'pointer', 'touch' fit ：draggable物件和droppable完全重疊 intersect ：draggable 和droppable至少重疊50% pointer ：滑鼠指標重疊droppable touch ：draggable和droppable有任何重疊

Code examples

初始化droppable物件的tolerance選項

$( ".selector" ).droppable({ tolerance: 'fit' });

在初始化之後取得或設定tolerance選項

//獲取 var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); //設定 $( ".selector" ).droppable( "option", "tolerance", 'fit' );

事件

activate

型態：dropactivate

這個事件會在任何一個draggable物件開始拖曳的時候觸發。 例如在開始拖曳一個draggable物件的時候，我們可以讓可以接受的droppable物件亮起來。

Code examples

初始化 activate 事件

$( ".selector" ).droppable({ activate: function(event, ui) { ... } });

綁定 activate 事件

$( ".selector" ).bind( "dropactivate", function(event, ui) { ... });

deactivate

型態：dropdeactivate

這個事件會在可接受的draggable物件停止拖曳的時候觸發。

Code examples

初始化 deactivate 事件

$( ".selector" ).droppable({ deactivate: function(event, ui) { ... } });

綁定 deactivate 事件

$( ".selector" ).bind( "dropdeactivate", function(event, ui) { ... });

over

型態：dropover

這個事件會在draggable物件"經過"droppable物件的時候觸發(經過的定義參考tolerance屬性)

Code examples

初始化 over 事件

$( ".selector" ).droppable({ over: function(event, ui) { ... } });

綁定 over 事件

$( ".selector" ).bind( "dropover", function(event, ui) { ... });

out

型態：dropout

這個事件會在一個draggable物件離開一個droppable的時候觸發 (離開的定義參考tolerance屬性)

Code examples

初始化 out 事件

$( ".selector" ).droppable({ out: function(event, ui) { ... } });

綁定 out 事件

$( ".selector" ).bind( "dropout", function(event, ui) { ... });

drop

型態：drop

這個事件會在draggable物件填入droppable物件的時候觸發。 在回調函數中，$(this)代表已經被draggable物件填充的droppable物件。 ui.draggable代表draggable物件。

Code examples

初始化 drop 事件

$( ".selector" ).droppable({ drop: function(event, ui) { ... } });

綁定 drop 事件

$( ".selector" ).bind( "drop", function(event, ui) { ... });

方法

destroy

用法：.droppable( "destroy" )

完全移除droppable的功能。讓元素回到初始狀態。

disable

用法：.droppable( "disable" )

禁止droppable的功能。

enable

用法：.droppable( "enable" )

啟用droppable。

option

用法：.droppable( "option" , optionName , [value])

獲取或設置任何droppable的選項。如果沒有指定值，將作為一個 getter。

option

用法：.droppable( "option" , options)

一次設定多個option，必須傳入一個option物件

widget

用法：.droppable( "widget")

回傳 .ui-droppable物件

[jQuery]UI/API/1.8/Draggable

以下是我參考了 jQuery  UI 1.8 API Draggable的部分，
如有錯誤請指正~




UI/API/1.8/Draggable

綜述

jQuery UI 的插件Draggable使得滑鼠能夠拖動選定的元素。
可拖動的元素會有一個類別：ui-draggable。在拖動的元素也會有一個類別：ui-draggable-dragging。
如果你不只是想要有drop的功能，而是drag-and-drop，可以參考jQuery UI的Droppable插件，它提供了接收draggable的drop方法。   
所有的回調（start,stop,drag）接受兩個參數：原始的瀏覽器事件(event)，ui對象，參考以下的內容（假設你把第二個參數稱為'UI'）：   

• 
  ui.helper - jQuery對象的helper，代表正在拖曳
  
• ui.position -helper目前的位置，以{ top, left }表示，指的是相對於原始目標的位置
• ui.offset -helper的絕對位置，以{ top, left } 表示，指的是相對於頁面的位置

選項

disable

型態：Boolean 預設值:false

禁用（true）或允許（false）物件可拖動。可以在初始化的時候設定（第一次創建）draggable。

Code examples

初始化draggable物件的 disabled選項

$( ".selector" ).draggable({ disabled: true });

在初始化之後取得或設定disabled選項

/ / 取得 var disabled = $( ".selector" ).draggable("option", "disabled" ); //設定 $( ".selector" ).draggable( "option","disabled", true );

addClasses

型態：Boolean 預設值:true

如果設置為false，就不會增加ui-draggable這個類別。這是以效能最佳化作為目標。draggable() 會對許多元素作初始化。

Code examples

初始化draggable物件的addClasses選項

$( ".selector" ).draggable({ addClasses: false });

在初始化之後取得或設定addClasses選項

//取得 var addClasses = $( ".selector" ).draggable("option", "addClasses" ); //設定 $( ".selector" ).draggable( "option", "addClasses",false );

appendTo

型態：Element, Selector 預設值:'parent'

傳入 appendTo 的元素或是由 appendTo選擇的元素在移動的時候會作為裝helper的容器預設情況下，helper拖曳會被附加在同一個容器。

Code examples

初始化draggable物件的appendTo選項

$( ".selector" ).draggable({ appendTo: 'body' });

在初始化之後取得或設定appendTo選項

//獲取 var appendTo = $( ".selector" ).draggable("option", "appendTo" ); //設定 $( ".selector" ).draggable( "option", "appendTo",'body' );

axis

型態：String 預設值:false

限制拖曳按照橫向（X）或垂直（Y）軸。可接受的值：'×'，'y'。

Code examples

初始化draggable物件的axis選項

$( ".selector" ).draggable({ axis: 'x' });

在初始化之後取得或設定axis選項

//獲取 var axis = $( ".selector" ).draggable("option", "axis" ); //設定 $( ".selector" ).draggable( "option","axis", 'x' );

cancel

型態：Selector 預設值:':input,option'

防止在指定的元素上拖曳

Code examples

初始化draggable物件的cancel選項

$( ".selector" ).draggable({ cancel: 'button' });

在初始化之後取得或設定cancel選項

//獲取 var cancel = $( ".selector" ).draggable("option", "cancel" ); //設定 $( ".selector" ).draggable( "option","cancel", 'button' );

connectToSortable

型態：Selector 預設值:false

允許在拖曳到指定的sortables放開。 如果使用此選項（ helper 必須設定為'clone'，以正常的運作），一個可拖動可以被丟棄到一個可排序的列表(sortables)，然後成為它的一部分。

Code examples

初始化draggable物件的connectToSortable選項

$( ".selector" ).draggable({ connectToSortable: 'ul#myList' });

在初始化之後取得或設定connectToSortable選項

//獲取 var connectToSortable = $( ".selector" ).draggable("option","connectToSortable" ); //設定 $( ".selector" ).draggable("option","connectToSortable",'ul#myList' );

containment

型態：Selector,Element,String,Array 預設值:false

限制可拖曳的範圍。合法的參數：'parent', 'document', 'window', [x1, y1, x2, y2]

Code examples

初始化draggable物件的containment選項

$( ".selector" ).draggable({ containment: 'parent' });

在初始化之後取得或設定containment選項

//獲取 var containment = $( ".selector" ).draggable("option", "containment" ); //設定 $( ".selector" ).draggable( "option","containment", 'parent' );

cursor

型態：String 預設值:'auto'

指定draggable時的滑鼠指標型式。

Code examples

初始化draggable物件的cursor選項

$( ".selector" ).draggable({ cursor: 'crosshair' });

在初始化之後取得或設定cursor選項

//獲取 var containment = $( ".selector" ).draggable("option", "containment" ); //設定 $( ".selector" ).draggable( "option","containment", 'parent' );

cursor

型態：String 預設值:'auto'

指定draggable時的滑鼠指標型式。

Code examples

初始化draggable物件的cursor選項

$( ".selector" ).draggable({ cursor: 'crosshair' });

在初始化之後取得或設定cursor選項

//獲取 var cursor = $( ".selector" ).draggable("option", "cursor" ); //設定 $( ".selector" ).draggable( "option","cursor", 'crosshair' );

cursorAt

型態：Object 預設值:false

開始拖曳的時候，滑鼠指標會定位在某一個位置上。 座標最多能包含2個參數：   { top, left, right, bottom }。

Code examples

初始化draggable物件的cursorAt選項

$( ".selector" ).draggable({ cursorAt: { left: 5 } });

在初始化之後取得或設定cursorAt選項

//獲取 var cursorAt = $( ".selector" ).draggable("option", "cursorAt" ); //設定 $( ".selector" ).draggable( "option", "cursorAt",{ left: 5 } );

dealy

型態： Integer 預設值:0

滑鼠點下之後，延遲指定的時間之後才會啟動拖曳的動作(時間以毫秒為單位)。 這個選項可用來防止不小心的點擊。

Code examples

初始化draggable物件的dealy選項

$( ".selector" ).draggable({ delay: 500 });

在初始化之後取得或設定dealy選項

//獲取 var delay = $( ".selector" ).draggable("option", "delay" ); //設定 $( ".selector" ).draggable( "option","delay", 500 );

distance

型態： Integer 預設值:1

滑鼠要移動一段指定的距離(以像素為單位)之後，才會開始拖曳的動作。 這個選項是用來防止不小心的拖曳或誤點。

Code examples

初始化draggable物件的distance選項

$( ".selector" ).draggable({ distance: 30 });

在初始化之後取得或設定distance選項

//獲取 var distance = $( ".selector" ).draggable("option", "distance" ); //設定 $( ".selector" ).draggable( "option","distance", 30 );

grid

型態： Array 預設值:false

拖曳元素的時候，按照指定的格子大小像素移動。array的值：[x,y]

Code examples

初始化draggable物件的grid選項

$( ".selector" ).draggable({ grid: [50, 20] });

在初始化之後取得或設定grid選項

//獲取 var grid = $( ".selector" ).draggable("option", "grid" ); //設定 $( ".selector" ).draggable( "option","grid", [50, 20] );

handle

型態： Element,Selector 預設值:false

限制只能在拖曳元素內的指定元素開始拖曳

Code examples

初始化draggable物件的handle選項

$( ".selector" ).draggable({ handle: 'h2' });

在初始化之後取得或設定handle選項

//獲取 var handle = $( ".selector" ).draggable("option", "handle" ); //設定 $( ".selector" ).draggable( "option","handle", 'h2' );

helper

型態： String, Function 預設值:'original'

拖曳元素時的顯示樣式。 允許的參數：'original', 'clone', Function 如果指定Function，這個Function必須要回傳一個DOM元素

Code examples

初始化draggable物件的helper選項

$( ".selector" ).draggable({ helper: 'clone' });

在初始化之後取得或設定helper選項

//獲取 var helper = $( ".selector" ).draggable("option", "helper" ); //設定 $( ".selector" ).draggable( "option","helper", 'clone' );

iframeFix

型態： Boolean, Selector 預設值:false

防止在拖曳的時候，iframe內部事件捕捉到滑鼠移過的事件(mosemove)。 實用的時候會結合cursorAt，或是滑鼠指標沒有超過helper。 如果設置為true，會在iframe的範圍產生一層屏蔽。 如果指定了Selector，屏蔽就會覆蓋在對應的iframe上

Code examples

初始化draggable物件的iframeFix選項

$( ".selector" ).draggable({ iframeFix: true });

在初始化之後取得或設定iframeFix選項

//獲取 var iframeFix = $( ".selector" ).draggable("option", "iframeFix" ); //設定 $( ".selector" ).draggable( "option","iframeFix", true );

opacity

型態： Float 預設值:false

定義被拖曳的時候的透明度。

Code examples

初始化draggable物件的opacity選項

$( ".selector" ).draggable({ opacity: 0.35 });

在初始化之後取得或設定opacity選項

//獲取 var opacity = $( ".selector" ).draggable("option", "opacity" ); //設定 $( ".selector" ).draggable( "option","opacity", 0.35 );

refreshPositions

型態： Boolean 預設值:false

如果設置為 true，每次滑鼠移動的位置都會被記錄。 注意：此功能會大大降低性能。

Code examples

初始化draggable物件的refreshPositions選項

$( ".selector" ).draggable({ refreshPositions: true });

在初始化之後取得或設定refreshPositions選項

//獲取 var refreshPositions = $( ".selector" ).draggable("option", "refreshPositions" ); //設定 $( ".selector" ).draggable( "option","refreshPositions", true );

revert

型態： Boolean, String 預設值:false

如果設置為 true，當拖曳結束時，元素會回到起始的位置。 有效的參數： 'valid', 'invalid'。 如果設置為invalid，只會在無效droppable的時候回到起始位置。

Code examples

初始化draggable物件的revert選項

$( ".selector" ).draggable({ revert: true });

在初始化之後取得或設定revert選項

//獲取 var revert = $( ".selector" ).draggable("option", "revert" ); //設定 $( ".selector" ).draggable( "option","revert", true );

revertDuration

型態： Integer 預設值:500

當拖曳結束後，回到起始位置的時間(以毫秒為單位)。 若revert設定為false則無效。

Code examples

初始化draggable物件的revertDuration選項

$( ".selector" ).draggable({ revertDuration: 1000 });

在初始化之後取得或設定revertDuration選項

//獲取 var revertDuration = $( ".selector" ).draggable("option", "revertDuration" ); //設定 $( ".selector" ).draggable( "option","revertDuration", 1000 );

scope

型態： String 預設值:default

用於設定draggable和droppable物件的配套關係。 一個draggable物件和droppable的scope值相同就能接受droppable的動作。

Code examples

初始化draggable物件的scope選項

$( ".selector" ).draggable({ scope: 'tasks' });

在初始化之後取得或設定scope選項

//獲取 var scope = $( ".selector" ).draggable("option", "scope" ); //設定 $( ".selector" ).draggable( "option","scope", 'tasks' );

scroll

型態： Boolean 預設值:true

如果設定為 true，在拖曳到容器邊緣的時候，容器會自動捲動。

Code examples

初始化draggable物件的scroll選項

$( ".selector" ).draggable({ scroll: false });

在初始化之後取得或設定scroll選項

//獲取 var scroll = $( ".selector" ).draggable("option", "scroll" ); //設定 $( ".selector" ).draggable( "option","scroll", false );

scrollSensitivity

型態： Integer 預設值:20

拖曳到邊緣的時候一次滾動的像素。

Code examples

初始化draggable物件的scrollSensitivity選項

$( ".selector" ).draggable({ scrollSensitivity: 40 });

在初始化之後取得或設定scrollSensitivity選項

//獲取 var scrollSensitivity = $( ".selector" ).draggable("option", "scrollSensitivity" ); //設定 $( ".selector" ).draggable( "option","scrollSensitivity", 40 );

scrollSpeed

型態： Integer 預設值:20

拖曳到邊緣時，自動滾動的速度

Code examples

初始化draggable物件的scrollSpeed選項

$( ".selector" ).draggable({ scrollSpeed: 40 });

在初始化之後取得或設定scrollSpeed選項

//獲取 var scrollSpeed = $( ".selector" ).draggable("option", "scrollSpeed" ); //設定 $( ".selector" ).draggable( "option","scrollSpeed", 40 );

snap

型態： Boolean, Selector 預設值:false

如果設定為Selector，或設定為true（相當於'.ui-draggable'），當拖曳到元素邊緣時會被吸附到該元素。

Code examples

初始化draggable物件的snap選項

$( ".selector" ).draggable({ snap: true });

在初始化之後取得或設定snap選項

//獲取 var snap = $( ".selector" ).draggable("option", "snap" ); //設定 $( ".selector" ).draggable( "option","snap", true );

snapMode

型態： String 預設值:'both'

定義元素吸附的模式。 若snap設定為false時無效。 有效的參數：'inner', 'outer', 'both'

Code examples

初始化draggable物件的snapMode選項

$( ".selector" ).draggable({ snapMode: 'outer' });

在初始化之後取得或設定snapMode選項

//獲取 var snapMode = $( ".selector" ).draggable("option", "snapMode" ); //設定 $( ".selector" ).draggable( "option","snapMode", 'outer' );

snapTolerance

型態： Integer 預設值:20

拖曳至靠近距離元素指定距離(像素)時產生吸附的作用。若snap設定為false時無效。

Code examples

初始化draggable物件的snapTolerance選項

$( ".selector" ).draggable({ snapTolerance: 40 });

在初始化之後取得或設定snapTolerance選項

//獲取 var snapTolerance = $( ".selector" ).draggable("option", "snapTolerance" ); //設定 $( ".selector" ).draggable( "option","snapTolerance", 40 );

stack

型態：   Selector 預設值:false

控制物件的z-index值，會把拖曳的物件放在最前面。例如在window managers就很常用到。

Code examples

初始化draggable物件的stack選項

$( ".selector" ).draggable({ stack:".products" });

在初始化之後取得或設定stack選項

//獲取 var stack = $( ".selector" ).draggable("option", "stack" ); //設定 $( ".selector" ).draggable( "option","stack", ".products" );

zIndex

型態：   Integer 預設值:false

在拖曳時的z-index值。

Code examples

初始化draggable物件的zIndex選項

$( ".selector" ).draggable({ zIndex: 2700 });

在初始化之後取得或設定zIndex選項

//獲取 var zIndex = $( ".selector" ).draggable("option", "zIndex" ); //設定 $( ".selector" ).draggable( "option","zIndex", 2700 );

事件

start

型態： dragstart

當滑鼠拖曳開始時觸發這個事件。

Code examples

初始化draggable物件的start事件

$( ".selector" ).draggable({ start: function(event, ui) { ... }） ））;

由dragstart綁定start事件

$( ".selector" ).bind( "dragstart",function(event, ui) { ... ））;

drag

型態： drag

當滑鼠拖曳開始時觸發這個事件。

Code examples

初始化draggable物件的drag事件

$( ".selector" ).draggable({ drag: function(event, ui) { ... }） ））;

綁定drag事件

$( ".selector" ).bind( "drag",function(event, ui) { ... ））;

stop

型態： dragstop

當滑鼠拖曳時觸發這個事件。

Code examples

初始化draggable物件的stop事件

$( ".selector" ).draggable({ stop: function(event, ui) { ... }） ））;

綁定stop事件

$( ".selector" ).bind( "dragstop",function(event, ui) { ... ））;

方法

destroy

用法： draggable( "destroy" )

移除draggable的功能。把元素返回原始的初始狀態。

disable

用法： draggable( "disable" )

禁止draggable功能。

enable

用法： draggable( "enable" )

啟用draggable功能。

option

用法：draggable( "option" , optionName , [value] )

獲取或設置option。如果沒有指定值，將作為一個 getter。

option

用法：draggable( "option" , options )

一次設定多個oprion，必須傳入一個option物件。

widget

用法：draggable( "widget" )

返回.ui-draggable元素。