程式設計雜筆

[程設雜筆] html5使用dragevent和註冊時遇到的麻煩

今天早上在寫html5 的drag event,遇到了不少問題。首先是註冊在windows或元素上,這就牽涉到$(this)所指的是什麼東西,也會造成程式碼裡頭的問題。接著就是drag event各部分,功能是什麼,分別應該註冊到什麼上面。

先看以下程式碼


<div class="eraserDiv" id="eraserCanvasDiv" ondrop="dropColorFunc(event)">;


$(document).on('drop','.eraserCanvasDiv',dropColorFunc);

這兩種方法看似相同,但有一個很大的差別,是兩者的$(this)不同。前者是window,後者是$(‘.eraserCanvasDiv’);

所以如果程式碼中有用到$(this)的話,就會發生很大的問題。


 

再來是一個完整的drag event介紹。

當滑鼠按下開始拖曳時,首先會先觸發ondragstart,但是如果要讓元素可以拖曳的話,需要設置attribute draggable="true"。

當拖到可以放置的地方時,會觸發ondragover,放開滑鼠會觸發ondrop。

但是有幾點要注意的是,如果滑鼠沒有在指定地點放開的話,不會觸發ondrop。而且為了讓滑鼠可以在該處放開,而listen到這個event,一定要加上ondragover。程式碼如下:


function dragOverFunc(event){
event.preventDefault();
}

中間那句event.preventDefault(),一定要加,否則依然沒有用。它的功能是把預設的設定屏蔽掉。

最後,所有動作都結束後,會觸發ondragend。

今天在嘗試的時候,想要試著在js裡面寫這些event的註冊,遇到幾個不解的問題。

dragover和drop和dragend不能寫成如下的形式。


$(document).on('drop','.eraserCanvasDiv',dropColorFunc);

如果這樣的形式,就聽不到event發生,也就是說只能將其寫在html的地方,或是用.attr()的方式,動態加上。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s