[練習]JS鼠標拖拽(DnD)操作

jsummer 發布于2019-08-19 17:15 / 3412人閱讀

拖放（Drag and Drop，DnD）操作因為涉及到與底層OS的結合，所以是較為復雜的交互操作。這里先實現一個簡單的拖拽圖片到瀏覽器顯示到操作，主要用到了HTML5中的FileAPI：

先上DEMO
DnD demo

需要注意的是瀏覽器通過取消相應的拖拽事件來表明它對該事件有興趣，比如通過取消dragover來表明瀏覽器已經做好準備接受進一步的拖拽，接著說dragend最后到drop，drop事件發生時，就可以使用HTML5新的文件API也就是FileAPI進行數據交互，具體見本栗代碼?
代碼：

HTML

File API可用

鼠標拖拽圖片放入框中

CSS

#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
p {text-align:center;}

var holder = document.getElementById("holder"),
    state = document.getElementById("status");
if (typeof window.FileReader === "undefined") {
  state.className = "fail";
} else {
 state.className = "success";
  state.innerHTML = "File API可用";
} 
 
holder.ondragover = function () {
 
 this.className = "hover";
 console.log("dragover"); return false;
};
holder.ondragend = function () { this.className = ""; return false; };
holder.ondrop = function (e) {
  //console.log(e)
  this.className = "";
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
    holder.style.background = "url(" + event.target.result + ") no-repeat center";
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};

GPU云服務器云服務器 html禁止鼠標拖拽常見數據庫的操作練習 JS拖拽 DnD

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78355.html

使用 Drag and Drop 給Web應用提升交互體驗

摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和。可拖拽元素，建議使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。什么是 Drag and Drop （拖放）？簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。我相信每個人都或多或少接觸過拖放，比如瀏覽...

legendmohe 2019-08-02 12:03 評論0 收藏0
使用React DND 完成一個簡單的卡片排序功能

摘要：簡介在公司初學其中一個要求讓我實現拖拽排序的功能完成之后記錄一下實現方法，采用和來實現這個功能。一環境搭建首先，使用腳手架創建一個最基本的項目。簡介在公司初學react,其中一個要求讓我實現拖拽排序的功能,完成之后記錄一下實現方法，采用antd和reactDND來實現這個功能。一、環境搭建首先，使用 create-react-app 腳手架創建一個最基本的react項目。 np...

edgardeng 2019-08-26 12:25 評論0 收藏0