[练习]JS鼠标拖拽(DnD)操作

jsummer 发布于2019-08-19 17:15 / 3365人阅读

拖放（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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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