關(guān)鍵字 ：超級(jí)拖放，GetDropTarget，ondragover，IHTMLDataTransfer
1、概述
許多多窗口瀏覽器都提供了一種被稱為“超級(jí)拖放”（或“超級(jí)拖拽”、“隨心拖放”等等，不一而足）的功能。作為對(duì)IE拖拽行為對(duì)擴(kuò)展，“超級(jí)拖放”實(shí)現(xiàn)了一些非常實(shí)用的功能：
- 拖放網(wǎng)頁(yè)鏈接：通常是在新窗口中打開
- 拖放選中的文字：保存文字、作為關(guān)鍵字通過(guò)搜索引擎搜索網(wǎng)絡(luò)、作為Url打開等
- 拖放圖片：通常是保存圖片到指定文件夾
- 當(dāng)然，還有很關(guān)鍵的一點(diǎn)：拖動(dòng)對(duì)象時(shí)鼠標(biāo)指針?lè)答伈煌耐献Ч?
- 文字在頁(yè)面內(nèi)與輸入框之間的交互拖放（這一點(diǎn)最為重要）
- 來(lái)自外部的文字與網(wǎng)頁(yè)輸入框之間的交互拖放
- 拖拽時(shí)滾動(dòng)頁(yè)面（這一點(diǎn)是被忽略了）
本文的目的，一是介紹實(shí)現(xiàn)超級(jí)拖放的兩種方法，二是說(shuō)明如何實(shí)現(xiàn)“完美”的拖放——即擴(kuò)展IE拖拽行為的同時(shí)，保留IE默認(rèn)的拖拽行為。三是給出一個(gè)最為直接和簡(jiǎn)潔的實(shí)現(xiàn)，至于拖放不同的對(duì)象以實(shí)現(xiàn)不同的功能，不在本文討論的范圍，略去。
2、標(biāo)準(zhǔn)的實(shí)現(xiàn)方法
標(biāo)準(zhǔn)方法即通過(guò)IDocHostUIHandler的GetDropTarget成員函數(shù)來(lái)實(shí)現(xiàn)，在MSDN這樣說(shuō)到：
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.
即
在適當(dāng)?shù)臅r(shí)候，MSHTML引擎會(huì)調(diào)用IDocHostUIHandler的GetDropTarget方法，為應(yīng)用程序提供一個(gè)機(jī)會(huì)來(lái)替換MSHTML
缺省的DropTarget實(shí)現(xiàn)。我們就可以通過(guò)這個(gè)自定義的DropTarget實(shí)現(xiàn)來(lái)完成上述的“超級(jí)拖放”功能。方法示例如下,其中略去的部分可參
考MFC中CHtmlControlSite和CHtmlView的源代碼：
STDMETHODIMP CHtmlControlSite::XDocHostUIHandler::GetDropTarget(
LPDROPTARGET pDropTarget, LPDROPTARGET* ppDropTarget)
{
METHOD_PROLOGUE_EX_(CHtmlControlSite, DocHostUIHandler)
*ppDropTarget = g_pDropTarget;//將自定義的實(shí)現(xiàn)告知MSHTML引擎
return S_OK;
}
其
中g(shù)_pDropTarget指向某個(gè)全局的IDropTarget接口的實(shí)現(xiàn)，我們假定為CIEDropTarget，CIEDropTarget實(shí)現(xiàn)
了IDropTarget的幾個(gè)成員函數(shù)DragEnter、DragOver、DragLeave和Drop。在DragEnter中可以決定是否接受
一個(gè)Drop以及如果接受這個(gè)Drop的話該提供怎樣的鼠標(biāo)拖拽反饋，在持續(xù)觸發(fā)的DragOver中同樣可以設(shè)定鼠標(biāo)拖拽反饋，從而實(shí)現(xiàn)在拖放不同的對(duì)
象（文字、鏈接、圖像等）時(shí)提供不同的拖拽視覺(jué)效果，實(shí)現(xiàn)相當(dāng)簡(jiǎn)單，此處不再贅述。
但
上面的實(shí)現(xiàn)存在一些問(wèn)題。首先是選中的文字在頁(yè)面內(nèi)與輸入框之間交互的拖放沒(méi)有了。這是自然的，既然我們用自定義的DropTarget替換掉了IE的缺
省實(shí)現(xiàn)，那這種交互的拖放理應(yīng)由我們自己實(shí)現(xiàn)。難處并非在于不能實(shí)現(xiàn)，而是在于實(shí)現(xiàn)起來(lái)比較麻煩——光是得到鼠標(biāo)下的HTML
Element就夠我們煩了；當(dāng)輸入框中有文字的時(shí)候，光標(biāo)還應(yīng)該隨著鼠標(biāo)的移動(dòng)而移動(dòng)——所以這個(gè)費(fèi)力還不一定討好的功能似乎沒(méi)有哪個(gè)瀏覽器去做。其
次，作為輸入框文字拖放的衍生物，拖拽滾動(dòng)沒(méi)有了。當(dāng)鼠標(biāo)向某個(gè)方向拖拽時(shí)，網(wǎng)頁(yè)應(yīng)該隨著將不可見的部分滾動(dòng)出來(lái)，比如某個(gè)輸入框，讓我們有機(jī)會(huì)將文字拖
拽過(guò)去。這個(gè)Feature的實(shí)現(xiàn)并不困難，不過(guò)一來(lái)是被忽略了（注意到拖拽滾動(dòng)的人并不多），二來(lái)主要Feature都沒(méi)有實(shí)現(xiàn)，這個(gè)滾動(dòng)也意義不大
了。
3、打入MSHTML內(nèi)部
既然從GetDropTarget提供外部實(shí)現(xiàn)難以得到與輸入框的交互式拖放，那就換個(gè)角度來(lái)考慮問(wèn)題，讓我們打入MSHTML的內(nèi)部。
著
手點(diǎn)是IHTMLDocumentX接口——操縱IE的DOM的法寶。我們注意到IHTMLDocument2有個(gè)ondragstart事件，進(jìn)而想到
應(yīng)該也有諸如ondragenter、ondragover、ondrop之類的事件（事實(shí)上也是有的），如果響應(yīng)這些事件，處理同輸入框的交互式拖放應(yīng)
該就能夠解決。因?yàn)檫@些拖放在MSHTML的缺省DropTarget實(shí)現(xiàn)中發(fā)生，因而當(dāng)鼠標(biāo)拖拽到某個(gè)輸入框上時(shí)，肯定會(huì)觸發(fā)一個(gè)ondragover
事件，而在IHTMLEventObj的輔助下我們能輕松得到相關(guān)的HTML
Element，其它的操作就容易進(jìn)行了。再細(xì)心一點(diǎn)，我們還發(fā)現(xiàn)IHTMLEventObj2接口有個(gè)dataTransfer屬性——可以得到一個(gè)
IHTMLDataTransfer的指針，而IHTMLDataTransfer接口正是瀏覽器內(nèi)部用于數(shù)據(jù)交換的重要手段之一（看看它的屬性就知道會(huì)
很有用了）：
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.
更進(jìn)一步，從IHTMLDataTransfer接口還可以訪問(wèn)到IDataObject接口，在進(jìn)行Ole拖放時(shí)，數(shù)據(jù)就是通過(guò)IDataObject接口來(lái)傳遞的。具體用法稍后討論。
4、打入MSHTML內(nèi)部——思路
提
供鼠標(biāo)反饋效果與實(shí)現(xiàn)GetDropTarget的方法類似，有了IHTMLDataTransfer接口，便可在ondragstart及
ondragover事件觸發(fā)時(shí)通過(guò)dropEffect屬性設(shè)置拖拽的效果（可根據(jù)需要自行設(shè)定，不設(shè)置的話使用默認(rèn)的效果）。再者，“拖”和“放”都
在MSHTML的缺省實(shí)現(xiàn)中發(fā)生，我們從IHTMLEventObj的SrcElement即可得知鼠標(biāo)所位置的HTML Element是否是輸入框。
5、打入MSHTML內(nèi)部——實(shí)現(xiàn)
HRESULT CHtmlDocument2::OnInvoke(DISPID dispidMember, REFIID riid, LCID lcid, WORD wFlags,
DISPPARAMS * pdispparams, VARIANT * pvarResult,EXCEPINFO * pexcepinfo,
UINT * puArgErr)
{
......
//如果只是要設(shè)置鼠標(biāo)拖拽效果的話，這個(gè)事件可以不處理
case DISPID_HTMLELEMENTEVENTS_ONDRAGSTART :
{
OnDragStart();
break ;
}
//重點(diǎn)在這里
case DISPID_HTMLELEMENTEVENTS_ONDRAGOVER :
{
OnDragOver();
break ;
}
case DISPID_HTMLELEMENTEVENTS_ONDROP :
{
OnDrop();
break ;
}
......
}
void CHtmlDocument2::OnDragOver( void )
{
SetDragEffect(); //設(shè)置鼠標(biāo)拖拽效果
}
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發(fā)生時(shí)IE的默認(rèn)行為是“沒(méi)有鼠標(biāo)拖拽效果”。
//將IHTMLEventObj的返回值設(shè)為false即可取消該事件的默認(rèn)行為，所以執(zhí)行完下面這句話，拖拽效果就出現(xiàn)了。
AllowDisplayDragCursor(pEventObj, FALSE);
CComBSTR bstrTagName;
pEventObj->get_srcElement(&pElement); //獲得當(dāng)前HTML Element
pElement->get_tagName(&bstrTagName);
if ( IsEditArea(bstrTagName) ) //根據(jù)Tag Name判斷是否鼠標(biāo)位于輸入框，以便設(shè)置焦點(diǎn)使得光標(biāo)隨鼠標(biāo)移動(dòng)
{
CComQIPtr<IHTMLElement2> pElement2;
if ( SUCCEEDED(pElement->QueryInterface(IID_IHTMLElement2, (void **) &pElement2 ))
&& pElement2 )
{
pElement2->focus();
}
//默認(rèn)情況下，當(dāng)拖拽文檔到輸入框時(shí)，鼠標(biāo)會(huì)變成拖拽的光標(biāo)，所以這里使用IE的默認(rèn)行為。
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 )
{ //獲取成功，拖放的對(duì)象是Url
DoOpenUrl(CString(Data.bstrVal));
}
else
{ //否則嘗試獲取選中的文本
bstrFormat = "Text";
hr = pdt->getData(bstrFormat, &Data);
if ( Data.vt != VT_NULL )
{ //獲取成功，拖放的內(nèi)容是文本
CComBSTR bstrTagName;
pEventObj->get_srcElement(&pElement);
pElement->get_tagName(&bstrTagName);
if ( IsEditArea(bstrTagName) )
{
//Drop target是輸入框，不做任何操作，由IE進(jìn)行默認(rèn)處理
return ;
}
else
{ //否則我們自己處理文本，或保存，或檢測(cè)是否鏈接后打開，等等
DoProcessText(CString(Data.bstrVal));
//Process the text
}
}
else
{ //既不是鏈接，也不是文本，可認(rèn)為是來(lái)自外部（如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、再次回到標(biāo)準(zhǔn)方法
上
述通過(guò)Event
Sink響應(yīng)網(wǎng)頁(yè)拖拽的方法已經(jīng)能夠很好地工作，可說(shuō)“趨于完美”了，但仍有兩個(gè)“小”問(wèn)題：第一，必須與document建立連接才能工作，而建立連接
的時(shí)機(jī)不容易掌握（MSDN中推薦的位置是DocumentComplete，但在NavigateComplete中也可，或者是檢測(cè)到
WebBrowser的readystate變?yōu)镽EADYSTATE_INTERACTIVE時(shí)進(jìn)行連接）。第二，實(shí)現(xiàn)方法還是略顯復(fù)雜。
有沒(méi)有更簡(jiǎn)單的方法呢？我決定再次對(duì)GetDropTarget進(jìn)行“調(diào)研”。所謂“踏破鐵鞋無(wú)覓處，得來(lái)全不費(fèi)功夫”，晃了一眼GetDropTarget方法的聲明后，靈機(jī)一動(dòng)，我忽然想到了辦法。事實(shí)證明，這是完美的解決辦法。
讓
我們?cè)賮?lái)看看GetDropTarget的聲明，其中第一個(gè)參數(shù)指向MSHTML提供的缺省DropTarget實(shí)現(xiàn)，而第二個(gè)參數(shù)用以返回應(yīng)用程序的自
定義DropTarget實(shí)現(xiàn)，如果在GetDropTarget中返回S_OK，MSHTML將以應(yīng)用程序提供的自定義DropTarget替換缺省的
DropTarget實(shí)現(xiàn)。
HRESULT GetDropTarget( IDropTarget *pDropTarget, IDropTarget **ppDropTarget);
參數(shù)說(shuō)明
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.
想到了嗎？解決問(wèn)題的關(guān)鍵就在于第一個(gè)參數(shù)pDropTarget。相信很多瀏覽器在處理的時(shí)候都忽略掉了第一個(gè)參數(shù)而只是將自己的實(shí)現(xiàn)通過(guò)第二個(gè)參數(shù)告知MSHTML，因而丟失了IE缺省的行為。既然如此，將缺省的IDropTarget接口的指針保存下來(lái)，在適當(dāng)?shù)臅r(shí)候調(diào)用，不就能夠保留IE的原始拖放行為了嗎？
完整的代碼就不再給出，我們只列出關(guān)鍵的部分作為示例。假設(shè)我們用來(lái)實(shí)現(xiàn)IDropTarget接口的類叫做CBrowserDropTarget：
//構(gòu)造函數(shù)，傳入?yún)?shù)即是從GetDropTarget得到的那個(gè)pDropTarget，它是MSHTML的缺省實(shí)現(xiàn)
CBrowserDropTarget::CBrowserDropTarget(IDropTarget *pOrginalDropTarget)
: m_bDragTextToInputBox(FALSE)
//這個(gè)布爾變量用來(lái)判斷是否正在向InputBox拖拽文字
, m_pOrginalDropTarget(pOrginalDropTarget)
//m_pOrginalDropTarget用來(lái)保存MSHTML的缺省實(shí)現(xiàn)
{
}
STDMETHODIMP CBrowserDropTarget::DragEnter(/* [unique][in] */IDataObject __RPC_FAR *pDataObj,
/* [in] */ DWORD grfKeyState,
/* [in] */ POINTL pt,
/* [out][in] */ DWORD __RPC_FAR *pdwEffect)
{
//調(diào)用缺省的行為
return m_pOrginalDropTarget->DragEnter(pDataObj, grfKeyState, pt, pdwEffect);
}
STDMETHODIMP CBrowserDropTarget::DragOver(/* [in] */ DWORD grfKeyState,
/* [in] */ POINTL pt,
/* [out][in] */ DWORD __RPC_FAR *pdwEffect)
{
//在網(wǎng)頁(yè)內(nèi)拖拽文字時(shí)這個(gè)值是DROPEFFECT_COPY（拖拽的文字不屬于輸入框中）
//或DROPEFFECT_COPY | DROPEFFECT_MOVE（拖拽的文字是輸入框中的文字）
DWORD dwTempEffect = *pdwEffect;
//接下來(lái)調(diào)用IE的缺省行為
HRESULT hr = m_pOrginalDropTarget->DragOver(grfKeyState, pt, pdwEffect);
//判斷是否是往輸入框拖拽文字
m_bDragTextToInputBox = IsDragTextToInputBox(dwOldEffect, *pdwEffect);
if ( !m_bDragTextToInputBox )
{
//不是往輸入框拖拽文字，則使用原始的拖拽效果。否則和IE的缺省效果一樣——也就是沒(méi)有效果
*pdwEffect = dwTempEffect;
}
return S_OK;
}
//根據(jù)調(diào)用缺省行為前后的Effect值判斷是否是往輸入框拖拽文字
BOOL CBrowserDropTarget::IsDragTextToInputBox(DWORD dwOldEffect, DWORD dwNewEffect)
{
//如果是把非輸入框中文字往輸入框拖動(dòng)，則dwOldEffect與dwNewEffect相等，都是DROPEFFECT_COPY
BOOL bTextSelectionToInputBox = ( dwOldEffect == DROPEFFECT_COPY )
&& ( dwOldEffect == dwNewEffect );
//如果是把文字從一個(gè)輸入框拖到另一個(gè)輸入框，則dwOldEffect為DROPEFFECT_COPY | DROPEFFECT_MOVE，
//而dwNewEffect的值可能為DROPEFFECT_MOVE（默認(rèn)情況），也可能為DROPEFFECT_COPY（按下Ctrl鍵時(shí)）
BOOL bInputBoxToInputBox = ( dwOldEffect == (DROPEFFECT_COPY | DROPEFFECT_MOVE) )
&& ( dwNewEffect == DROPEFFECT_MOVE || dwNewEffect == DROPEFFECT_COPY );
//來(lái)自Microsoft Word的拖拽特殊一些，dwOldEffect是所有效果的組合值
BOOL bMSWordToInputBox =
( dwOldEffect == (DROPEFFECT_COPY | DROPEFFECT_MOVE | DROPEFFECT_LINK) )
&& ( dwNewEffect == DROPEFFECT_MOVE || dwNewEffect == DROPEFFECT_COPY );
//來(lái)自Edit Plus的拖拽過(guò)也特殊一些，dwOldEffect是個(gè)負(fù)數(shù)（懷疑是Edit Plus的拖拽實(shí)現(xiàn)有問(wèn)題）
BOOL bEditPlusToInputBox = ( dwOldEffect < 0 )
&& ( dwNewEffect == DROPEFFECT_MOVE || dwNewEffect == DROPEFFECT_COPY );
//也許還有些例外，可再添加
......
return bTextSelectionToInputBox || bInputBoxToInputBox || bMSWordToInputBox || bEditPlusToInputBox;
}
STDMETHODIMP CBrowserDropTarget::DragLeave()
{
//調(diào)用缺省的行為
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 )
{
//是文字拖放，調(diào)用IE的缺省行為
return m_pOrginalDropTarget->Drop(pDataObj, grfKeyState, pt, pdwEffect);
}
//否則是拖放鏈接、圖片、文件等，按常規(guī)的IDataObject處理方式
......
return S_OK;
}
至此，我們就得到了一個(gè)完美的“超級(jí)拖放”的基本框架，它在擴(kuò)展的同時(shí)保留了IE的默認(rèn)行為：
- 文字在頁(yè)面內(nèi)與輸入框之間能夠交互拖放。
- 來(lái)自外部的文字與網(wǎng)頁(yè)輸入框之間也能交互拖放
- 拖拽時(shí)能夠自動(dòng)滾動(dòng)頁(yè)面
其余的功能，如向不同的方向拖拽以完成不同的工作，左鍵右鍵拖放執(zhí)行不同的功能，按住Alt保存文字等等，可根據(jù)需要自行實(shí)現(xiàn)，不再討論。
8、修正
今天和Stanley Xu聊了幾個(gè)鐘頭，受益匪淺。根據(jù)Stanley的提議，毋須再作是否往輸入框拖拽文字的判斷，因?yàn)槲覀冃枰闹皇窃贗E的缺省行為沒(méi)有鼠標(biāo)拖拽效果的時(shí)候讓它有拖拽效果，因此只需要簡(jiǎn)單地判斷調(diào)用IE缺省行為后的Effect值是否為0即可，如下：
//判斷是否是往輸入框拖拽文字
m_bDragTextToInputBox = *pdwEffect != 0;
簡(jiǎn)單而直接，當(dāng)然更重要的是：可用。
9、參考資料
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=677425