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

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

先看以下程式碼

[code language=”html”]

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

[/code]

[code language=”javascript”]

$(document).on(‘drop’,’.eraserCanvasDiv’,dropColorFunc);

[/code]

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

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


 

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

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

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

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

[code language=”javascript”]

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

[/code]

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

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

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

dragover和drop和dragend不能寫成如下的形式。
[code language=”javascript”]

$(document).on(‘drop’,’.eraserCanvasDiv’,dropColorFunc);

[/code]

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

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

分享:

Leave a Reply