javascript 的 drag and drop....

javascript 中的 event 的 drag 指的是 dom 的 element 的 drag…

像把圖片拖到瀏覽器中上傳…

圖片→滑鼠mousedown→某個dom區域(div/form…)→滑鼠mouseup(or drop)→ ajax 傳到server→server吐回link…
|----------------------------------?------->|

這段的 event 是怎寫??

好像找不到適合的…

http://www.w3schools.com/jsref/dom_obj_event.asp

ps.
DOM level 2, 3 是什意思?..

thx

DOM level 是版本的意思,類似 HTML4 / HTML5 / CSS2 / CSS3,就是 spec 的標準,而 DOM level 3 發表在 2004 … 簡單的來說用就對了|||

其餘的給你篇文章,裡面有所有的 demo code 就是,而 w3schools 通常都沒有你要的東西,因為裡面的 example 太少,只有部分解釋之類的

http://www.html5rocks.com/en/tutorials/file/dndfiles/

另外一方面, drag 系列因為可以多選檔案,所以會有一個類似迴圈的東西去跑,甚至資料夾也可以進去,所以那邊都要自己處理就是

1個讚

再續問這個 drag and drop 問題…

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  var create_img_div = document.createElement("div");
  create_img_div.setAttribute("id", "drop_img");
  document.getElementById('drop_zone').appendChild(create_img_div);
  evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

function handleDragLeave(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  var create_img_div = document.createElement("div");
  create_img_div.setAttribute("id", "drop_img");
  document.getElementById('drop_zone').appendChild(create_img_div);
  evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('dragleave', handleDragLeave, false);
dropZone.addEventListener('drop', handleFileSelect, false);

我想在 drag 時拉過去時產生一個新的 div 同時設定他的 id/class 之類的…
其實就是這個 handleDragOver function…
但這個只要檔案 over 在上方就一直加

#=>只想加一個就好了…
javascript 怎把這種 dragover, dragleave 的連續當做一次?(e.g. onclick 之類的…)

有看到
http://www.sitepoint.com/create-one-time-events-javascript/

這樣用 callee …這不了解是什麼做法…

練習中…

我沒測試過,不過你的 function 內沒有 return false;,也就是中斷疊加狀態,或是 stopPropagation

至於 event 真的都一起來,且全部就真的都要(其實部分 event 你是可以選擇不要用的),那就設定一個全域變數來記得目前的 status 來做事情就好了