關鍵字 ：超級拖放，GetDropTarget，ondragover，IHTMLDataTransfer
1、概述
許多多窗口瀏覽器都提供了一種被稱為“超級拖放”（或“超級拖拽”、“隨心拖放”等等，不一而足）的功能。作為對IE拖拽行為對擴展，“超級拖放”實現了一些非常實用的功能：
- 拖放網頁鏈接：通常是在新窗口中打開
- 拖放選中的文字：保存文字、作為關鍵字通過搜索引擎搜索網絡、作為Url打開等
- 拖放圖片：通常是保存圖片到指定文件夾
- 當然，還有很關鍵的一點：拖動對象時鼠標指針反饋不同的拖拽效果
- 文字在頁面內與輸入框之間的交互拖放（這一點最為重要）
- 來自外部的文字與網頁輸入框之間的交互拖放
- 拖拽時滾動頁面（這一點是被忽略了）
本文的目的，一是介紹實現超級拖放的兩種方法，二是說明如何實現“完美”的拖放——即擴展IE拖拽行為的同時，保留IE默認的拖拽行為。三是給出一個最為直接和簡潔的實現，至于拖放不同的對象以實現不同的功能，不在本文討論的范圍，略去。
2、標準的實現方法
標準方法即通過IDocHostUIHandler的GetDropTarget成員函數來實現，在MSDN這樣說到：
IDocHostUIHandler::GetDropTarget Method——Called by MSHTML when it is used as a drop target. This method enables the host to supply an alternative IDropTarget interface.
即
在適當的時候，MSHTML引擎會調用IDocHostUIHandler的GetDropTarget方法，為應用程序提供一個機會來替換MSHTML
缺省的DropTarget實現。我們就可以通過這個自定義的DropTarget實現來完成上述的“超級拖放”功能。方法示例如下,其中略去的部分可參
考MFC中CHtmlControlSite和CHtmlView的源代碼：
STDMETHODIMP CHtmlControlSite::XDocHostUIHandler::GetDropTarget(
LPDROPTARGET pDropTarget, LPDROPTARGET* ppDropTarget)
{
METHOD_PROLOGUE_EX_(CHtmlControlSite, DocHostUIHandler)
*ppDropTarget = g_pDropTarget;//將自定義的實現告知MSHTML引擎
return S_OK;
}
其
中g_pDropTarget指向某個全局的IDropTarget接口的實現，我們假定為CIEDropTarget，CIEDropTarget實現
了IDropTarget的幾個成員函數DragEnter、DragOver、DragLeave和Drop。在DragEnter中可以決定是否接受
一個Drop以及如果接受這個Drop的話該提供怎樣的鼠標拖拽反饋，在持續觸發的DragOver中同樣可以設定鼠標拖拽反饋，從而實現在拖放不同的對
象（文字、鏈接、圖像等）時提供不同的拖拽視覺效果，實現相當簡單，此處不再贅述。
但
上面的實現存在一些問題。首先是選中的文字在頁面內與輸入框之間交互的拖放沒有了。這是自然的，既然我們用自定義的DropTarget替換掉了IE的缺
省實現，那這種交互的拖放理應由我們自己實現。難處并非在于不能實現，而是在于實現起來比較麻煩——光是得到鼠標下的HTML
Element就夠我們煩了；當輸入框中有文字的時候，光標還應該隨著鼠標的移動而移動——所以這個費力還不一定討好的功能似乎沒有哪個瀏覽器去做。其
次，作為輸入框文字拖放的衍生物，拖拽滾動沒有了。當鼠標向某個方向拖拽時，網頁應該隨著將不可見的部分滾動出來，比如某個輸入框，讓我們有機會將文字拖
拽過去。這個Feature的實現并不困難，不過一來是被忽略了（注意到拖拽滾動的人并不多），二來主要Feature都沒有實現，這個滾動也意義不大
了。
3、打入MSHTML內部
既然從GetDropTarget提供外部實現難以得到與輸入框的交互式拖放，那就換個角度來考慮問題，讓我們打入MSHTML的內部。
著
手點是IHTMLDocumentX接口——操縱IE的DOM的法寶。我們注意到IHTMLDocument2有個ondragstart事件，進而想到
應該也有諸如ondragenter、ondragover、ondrop之類的事件（事實上也是有的），如果響應這些事件，處理同輸入框的交互式拖放應
該就能夠解決。因為這些拖放在MSHTML的缺省DropTarget實現中發生，因而當鼠標拖拽到某個輸入框上時，肯定會觸發一個ondragover
事件，而在IHTMLEventObj的輔助下我們能輕松得到相關的HTML
Element，其它的操作就容易進行了。再細心一點，我們還發現IHTMLEventObj2接口有個dataTransfer屬性——可以得到一個
IHTMLDataTransfer的指針，而IHTMLDataTransfer接口正是瀏覽器內部用于數據交換的重要手段之一（看看它的屬性就知道會
很有用了）：
IHTMLDataTransfer Members
clearData——Removes one or more data formats from the clipboard through dataTransfer or clipboardData object.
dropEffect——Sets or retrieves the type of drag-and-drop operation and the type of cursor to display.
effectAllowed——Sets or retrieves, on the source element, which data transfer operations are allowed for the object.
getData——Retrieves the data in the specified format from the clipboard through the dataTransfer or clipboardData objects.
setData——Assigns data in a specified format to the dataTransfer or clipboardData object.
更進一步，從IHTMLDataTransfer接口還可以訪問到IDataObject接口，在進行Ole拖放時，數據就是通過IDataObject接口來傳遞的。具體用法稍后討論。
4、打入MSHTML內部——思路
提
供鼠標反饋效果與實現GetDropTarget的方法類似，有了IHTMLDataTransfer接口，便可在ondragstart及
ondragover事件觸發時通過dropEffect屬性設置拖拽的效果（可根據需要自行設定，不設置的話使用默認的效果）。再者，“拖”和“放”都
在MSHTML的缺省實現中發生，我們從IHTMLEventObj的SrcElement即可得知鼠標所位置的HTML Element是否是輸入框。
5、打入MSHTML內部——實現
HRESULT CHtmlDocument2::OnInvoke(DISPID dispidMember, REFIID riid, LCID lcid, WORD wFlags,
DISPPARAMS * pdispparams, VARIANT * pvarResult,EXCEPINFO * pexcepinfo,
UINT * puArgErr)
{
......
//如果只是要設置鼠標拖拽效果的話，這個事件可以不處理
case DISPID_HTMLELEMENTEVENTS_ONDRAGSTART :
{
OnDragStart();
break ;
}
//重點在這里
case DISPID_HTMLELEMENTEVENTS_ONDRAGOVER :
{
OnDragOver();
break ;
}
case DISPID_HTMLELEMENTEVENTS_ONDROP :
{
OnDrop();
break ;
}
......
}
void CHtmlDocument2::OnDragOver( void )
{
SetDragEffect(); //設置鼠標拖拽效果
}
void CHtmlDocument2::SetDragEffect( void )
{
CComQIPtr<IHTMLWindow2> pWindow;
CComQIPtr<IHTMLEventObj> pEventObj;
CComQIPtr<IHTMLEventObj2> pEventObj2;
CComQIPtr<IHTMLElement> pElement;
HRESULT hr = m_spHtmlObj->get_parentWindow( &pWindow );
hr = pWindow->get_event( &pEventObj );
//ondragover發生時IE的默認行為是“沒有鼠標拖拽效果”。
//將IHTMLEventObj的返回值設為false即可取消該事件的默認行為，所以執行完下面這句話，拖拽效果就出現了。
AllowDisplayDragCursor(pEventObj, FALSE);
CComBSTR bstrTagName;
pEventObj->get_srcElement(&pElement); //獲得當前HTML Element
pElement->get_tagName(&bstrTagName);
if ( IsEditArea(bstrTagName) ) //根據Tag Name判斷是否鼠標位于輸入框，以便設置焦點使得光標隨鼠標移動
{
CComQIPtr<IHTMLElement2> pElement2;
if ( SUCCEEDED(pElement->QueryInterface(IID_IHTMLElement2, (void **) &pElement2 ))
&& pElement2 )
{
pElement2->focus();
}
//默認情況下，當拖拽文檔到輸入框時，鼠標會變成拖拽的光標，所以這里使用IE的默認行為。
AllowDisplayDragCursor(pEventObj, TRUE);
}
}
BOOL CHtmlDocument2::IsEditArea(CComBSTR bstrTagName)
{
return bstrTagName == "INPUT" || bstrTagName == "TEXTAREA";
}
void CHtmlDocument2::AllowDisplayDragCursor(CComQIPtr<IHTMLEventObj> pEventObj, BOOL bAllow)
{
VARIANT v;
v.vt = VT_BOOL;
v.boolVal = !bAllow ? VARIANT_FALSE : VARIANT_TRUE;
pEventObj->put_returnValue(v);
}
void CHtmlDocument2::OnDrop( void )
{
CComQIPtr<IHTMLWindow2> pWindow;
CComQIPtr<IHTMLEventObj> pEventObj;
CComQIPtr<IHTMLEventObj2> pEventObj2;
CComQIPtr<IHTMLElement> pElement;
CComQIPtr<IHTMLDataTransfer> pdt; //此處演示如何使用IHTMLDataTransfer
HRESULT hr = m_spHtmlObj->get_parentWindow( &pWindow );
hr = pWindow->get_event( &pEventObj );
hr = pEventObj->QueryInterface(IID_IHTMLEventObj2, (void **) &pEventObj2 );
hr = pEventObj2->get_dataTransfer(&pdt);
CComBSTR bstrFormat = "URL"; //首先嘗試獲取URL
VARIANT Data;
hr = pdt->getData(bstrFormat, &Data);
if ( Data.vt != VT_NULL )
{ //獲取成功，拖放的對象是Url
DoOpenUrl(CString(Data.bstrVal));
}
else
{ //否則嘗試獲取選中的文本
bstrFormat = "Text";
hr = pdt->getData(bstrFormat, &Data);
if ( Data.vt != VT_NULL )
{ //獲取成功，拖放的內容是文本
CComBSTR bstrTagName;
pEventObj->get_srcElement(&pElement);
pElement->get_tagName(&bstrTagName);
if ( IsEditArea(bstrTagName) )
{
//Drop target是輸入框，不做任何操作，由IE進行默認處理
return ;
}
else
{ //否則我們自己處理文本，或保存，或檢測是否鏈接后打開，等等
DoProcessText(CString(Data.bstrVal));
//Process the text
}
}
else
{ //既不是鏈接，也不是文本，可認為是來自外部（如Windows Shell）的文件拖放
DoOnDropFiles(pdt);
}
}
}
//演示如何從IHTMLDataTransfer得到IDataObject
void CHtmlDocument2::DoOnDropFiles(CComQIPtr<IHTMLDataTransfer> pDataTransfer)
{
CComQIPtr<IServiceProvider> psp;
CComQIPtr<IDataObject> pdo;
if ( FAILED(pDataTransfer->QueryInterface(IID_IServiceProvider, (void **) &psp)) )
{
return ;
}
if ( FAILED(psp->QueryService(IID_IDataObject, IID_IDataObject, (void **) &pdo)) )
{
return ;
}
COleDataObject DataObject;
DataObject.Attach(pdo);
......
}
6、再次回到標準方法
上
述通過Event
Sink響應網頁拖拽的方法已經能夠很好地工作，可說“趨于完美”了，但仍有兩個“小”問題：第一，必須與document建立連接才能工作，而建立連接
的時機不容易掌握（MSDN中推薦的位置是DocumentComplete，但在NavigateComplete中也可，或者是檢測到
WebBrowser的readystate變為READYSTATE_INTERACTIVE時進行連接）。第二，實現方法還是略顯復雜。
有沒有更簡單的方法呢？我決定再次對GetDropTarget進行“調研”。所謂“踏破鐵鞋無覓處，得來全不費功夫”，晃了一眼GetDropTarget方法的聲明后，靈機一動，我忽然想到了辦法。事實證明，這是完美的解決辦法。
讓
我們再來看看GetDropTarget的聲明，其中第一個參數指向MSHTML提供的缺省DropTarget實現，而第二個參數用以返回應用程序的自
定義DropTarget實現，如果在GetDropTarget中返回S_OK，MSHTML將以應用程序提供的自定義DropTarget替換缺省的
DropTarget實現。
HRESULT GetDropTarget( IDropTarget *pDropTarget, IDropTarget **ppDropTarget);
參數說明
pDropTarget
[in] Pointer to an IDropTarget interface for the current drop target object supplied by MSHTML.
ppDropTarget
[out] Address of a pointer variable that receives an IDropTarget interface pointer for the alternative drop target object supplied by the host.
想到了嗎？解決問題的關鍵就在于第一個參數pDropTarget。相信很多瀏覽器在處理的時候都忽略掉了第一個參數而只是將自己的實現通過第二個參數告知MSHTML，因而丟失了IE缺省的行為。既然如此，將缺省的IDropTarget接口的指針保存下來，在適當的時候調用，不就能夠保留IE的原始拖放行為了嗎？
完整的代碼就不再給出，我們只列出關鍵的部分作為示例。假設我們用來實現IDropTarget接口的類叫做CBrowserDropTarget：
//構造函數，傳入參數即是從GetDropTarget得到的那個pDropTarget，它是MSHTML的缺省實現
CBrowserDropTarget::CBrowserDropTarget(IDropTarget *pOrginalDropTarget)
: m_bDragTextToInputBox(FALSE)
//這個布爾變量用來判斷是否正在向InputBox拖拽文字
, m_pOrginalDropTarget(pOrginalDropTarget)
//m_pOrginalDropTarget用來保存MSHTML的缺省實現
{
}
STDMETHODIMP CBrowserDropTarget::DragEnter(/* [unique][in] */IDataObject __RPC_FAR *pDataObj,
/* [in] */ DWORD grfKeyState,
/* [in] */ POINTL pt,
/* [out][in] */ DWORD __RPC_FAR *pdwEffect)
{
//調用缺省的行為
return m_pOrginalDropTarget->DragEnter(pDataObj, grfKeyState, pt, pdwEffect);
}
STDMETHODIMP CBrowserDropTarget::DragOver(/* [in] */ DWORD grfKeyState,
/* [in] */ POINTL pt,
/* [out][in] */ DWORD __RPC_FAR *pdwEffect)
{
//在網頁內拖拽文字時這個值是DROPEFFECT_COPY（拖拽的文字不屬于輸入框中）
//或DROPEFFECT_COPY | DROPEFFECT_MOVE（拖拽的文字是輸入框中的文字）
DWORD dwTempEffect = *pdwEffect;
//接下來調用IE的缺省行為
HRESULT hr = m_pOrginalDropTarget->DragOver(grfKeyState, pt, pdwEffect);
//判斷是否是往輸入框拖拽文字
m_bDragTextToInputBox = IsDragTextToInputBox(dwOldEffect, *pdwEffect);
if ( !m_bDragTextToInputBox )
{
//不是往輸入框拖拽文字，則使用原始的拖拽效果。否則和IE的缺省效果一樣——也就是沒有效果
*pdwEffect = dwTempEffect;
}
return S_OK;
}
//根據調用缺省行為前后的Effect值判斷是否是往輸入框拖拽文字
BOOL CBrowserDropTarget::IsDragTextToInputBox(DWORD dwOldEffect, DWORD dwNewEffect)
{
//如果是把非輸入框中文字往輸入框拖動，則dwOldEffect與dwNewEffect相等，都是DROPEFFECT_COPY
BOOL bTextSelectionToInputBox = ( dwOldEffect == DROPEFFECT_COPY )
&& ( dwOldEffect == dwNewEffect );
//如果是把文字從一個輸入框拖到另一個輸入框，則dwOldEffect為DROPEFFECT_COPY | DROPEFFECT_MOVE，
//而dwNewEffect的值可能為DROPEFFECT_MOVE（默認情況），也可能為DROPEFFECT_COPY（按下Ctrl鍵時）
BOOL bInputBoxToInputBox = ( dwOldEffect == (DROPEFFECT_COPY | DROPEFFECT_MOVE) )
&& ( dwNewEffect == DROPEFFECT_MOVE || dwNewEffect == DROPEFFECT_COPY );
//來自Microsoft Word的拖拽特殊一些，dwOldEffect是所有效果的組合值
BOOL bMSWordToInputBox =
( dwOldEffect == (DROPEFFECT_COPY | DROPEFFECT_MOVE | DROPEFFECT_LINK) )
&& ( dwNewEffect == DROPEFFECT_MOVE || dwNewEffect == DROPEFFECT_COPY );
//來自Edit Plus的拖拽過也特殊一些，dwOldEffect是個負數（懷疑是Edit Plus的拖拽實現有問題）
BOOL bEditPlusToInputBox = ( dwOldEffect < 0 )
&& ( dwNewEffect == DROPEFFECT_MOVE || dwNewEffect == DROPEFFECT_COPY );
//也許還有些例外，可再添加
......
return bTextSelectionToInputBox || bInputBoxToInputBox || bMSWordToInputBox || bEditPlusToInputBox;
}
STDMETHODIMP CBrowserDropTarget::DragLeave()
{
//調用缺省的行為
return m_pOrginalDropTarget->DragLeave();
}
STDMETHODIMP CBrowserDropTarget::Drop(/* [unique][in] */ IDataObject __RPC_FAR *pDataObj,
/* [in] */ DWORD grfKeyState,
/* [in] */ POINTL pt,
/* [out][in] */ DWORD __RPC_FAR *pdwEffect)
{
if ( m_bDragTextToInputBox )
{
//是文字拖放，調用IE的缺省行為
return m_pOrginalDropTarget->Drop(pDataObj, grfKeyState, pt, pdwEffect);
}
//否則是拖放鏈接、圖片、文件等，按常規的IDataObject處理方式
......
return S_OK;
}
至此，我們就得到了一個完美的“超級拖放”的基本框架，它在擴展的同時保留了IE的默認行為：
- 文字在頁面內與輸入框之間能夠交互拖放。
- 來自外部的文字與網頁輸入框之間也能交互拖放
- 拖拽時能夠自動滾動頁面
其余的功能，如向不同的方向拖拽以完成不同的工作，左鍵右鍵拖放執行不同的功能，按住Alt保存文字等等，可根據需要自行實現，不再討論。
8、修正
今天和Stanley Xu聊了幾個鐘頭，受益匪淺。根據Stanley的提議，毋須再作是否往輸入框拖拽文字的判斷，因為我們需要的只是在IE的缺省行為沒有鼠標拖拽效果的時候讓它有拖拽效果，因此只需要簡單地判斷調用IE缺省行為后的Effect值是否為0即可，如下：
//判斷是否是往輸入框拖拽文字
m_bDragTextToInputBox = *pdwEffect != 0;
簡單而直接，當然更重要的是：可用。
9、參考資料
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=677425