拖拽

作者: 追逐_e6cf | 来源:发表于2018-09-19 00:19 被阅读0次

一、JS拖拽
JS里拖拽三事件, onmousedown onmousemove onmouseup 是实现交互性效果,根据鼠标的移动位置让标签元素联动
而H5拖拽也可以实现但更简单,实际例子: 百度图片识别,qq邮箱文件提交,百度网盘文件上传,并可以获取到文件的 名称,大小,修改时间
标签元素默认是不可以拖拽的,draggable="true"才能够被拖拽

const box = document.querySelector("div");
box.onmousedown = function(e){
  e = e || window.event;
  let x = e.clientX - this.offsetLeft;
  let y = e.clientY - this.offsetTop;
  document.onmousemove = function(e){
    box.style.cssText = "left:" + (e.clientX - x) + "px;top:" + (e.clientY - y) + "px";
  }
  document.onmouseup = function(){
    document.onmousemove = document.onmouseup = null;
  }
}

二、h5拖拽

<div id = "box" draggable = "true"></div>

const box = document.querySelector("div");
box.ondragover = function(e){
  this.style.cssText = "left:" + (e.clientX - 100) + "px;top:" + (e.clientY - 50) + "px";
}
box.ondragend = function(e){
  this.style.cssText = "left:" + (e.clientX - 100) + "px;top:" + (e.clientY - 50) + "px";
}

三、拖拽兄弟

<div id = "box"></div>
<div id = "drag" draggable="true"></div>

const box = document.querySelector(#box);
const drag = document.querySelector(#drag);
let n = 0;

//拖拽元素
drag.ondragstart = function(){  //拖拽的一瞬间
  this.style.background = "pink";
}
drag.ondrag = function(){  //连续触发
  document.title = n++;
}
drag.ondragend = function(){  //拖拽结束
  this.style.background = "red";
}

//目标元素
box.ondragenter = function(){  //监听拖拽元素进入到目标元素区域内
  this.style.background = "skyblue";
}
box.ondragover = function(e){  //在目标元素身上连续触发
  this.innerHTML = n++;
  e.preventDefault();
  e.stopPropagation();
}
box.ondragleave = function(){  //在目标元素身上离开
  this.innerHTML = "";
}
box.ondrop = function(e){  //在目标元素上面释放鼠标时触发,必须将ondragover中设置e.preventDefault()和e.stopPropagation()才能触发
  e.preventDefault();
  e.stopPropagation();
  document.body.removeChild(dra
}

四、火狐兼容

const box = document.querySelector("#box");
const list = document.querySelector("#list");
const li = list.querySelectorAll("li");
li.forEach((item, index)=>{
  item.setAttribute("draggable", "true");
  item.ondragstart = function(e){
    e.dataTransfer.setData("key", index);  //兼容火狐,捕获dataTransfer对象里的数据
  }
})
box.ondragenter = function(){
  this.innerHTML = "请释放你的双手";
}
box.ondragover = function(){
  e.preventDefault();
  e.stopPropagation();
}
box.ondragleave = function(){
  this.innerHTML = "请把li拖拽到此区域";
}
box.ondrop = function(e){
  e.preventDefault();
  e.stopPropagation();
  list.removeChile(li[e.dataTransfer.getData("key")]);
}

五、file对象

const box = document.querySelector("div");
box.ondragover = function(e){
  e.preventDefault();
  e.stopPropagation();
}
box.ondrop = function(e){
  e.preventDefault();
  e.stopPropagation();
  console.log(
    e.dataTransfer.files[0].name,
    e.dataTransfer.files[0].type,
    e.dataTransfer.files[0].lastModified,
    e.dataTransfer.files[0].lastModifiedDate.toLocaleDateString(),
    e.dataTransfer.files[0].lastModifiedDate.toLacaleTimeString(),
    e.dataTransfer.files[0].lastModifiedDate.toDateString(),
  );
  //拖拽图片预览
  let oFile = e.dataTransfer.files[0];
  let blob = new Blob([oFile]);  //第一个参数一定是一个数组,第二个为mime类型
  let url = window.URL.createObjectURL(blob);
  let img = new Image();
  img.width = 300;
  img.height = 150;
  img.src = url;
  img.onload = function(){
    document.body.appendChild(this);
  }
}

六、fileReader对象读取数据

const box = document.querySelector("div");
box.ondragover = function(e){
  e.preventDefault();
  e.stopPropagation();
}
box.ondrop = function(e){
  e.preventDefault();
  e.stopPropagation();
  console.log(
    e.dataTransfer.files[0].name,
    e.dataTransfer.files[0].type,
    e.dataTransfer.files[0].lastModified,
    e.dataTransfer.files[0].lastModifiedDate.toLocaleDateString(),
    e.dataTransfer.files[0].lastModifiedDate.toLacaleTimeString(),
    e.dataTransfer.files[0].lastModifiedDate.toDateString(),
  );
  //拖拽图片预览
  let oFile = e.dataTransfer.files[0];
  //创建文件读取对象
  let reader = new FileReader();
  reader.readAsDataURL(oFile);  //分析oFile文件对象
  reader.onload = function(){
    //返回data:base64数据 A-Z a-z 0~9 + / = 64位字符
    console.log(this.result);
    let img = new Image();
    img.width = 300;
    img.height = 150;
    img.src = this.result;
    img.onload = function(){
      document.body.appendChild(this);
    }
  }
}

Blob对象与URL对象读取数据
Blob对象代表了一段二进制数据,提供了一系列操作接口
file对象的父类型是Blob对象
对象URL也被称为 blob URL,指的是引用保存在File或Blob中数据的URL,使用对象URL的好处是没必要把内容读取到js中,而直接使用文件内容,能生成一个链接,例如 Img的src = URL

相关文章

  • 拖拽操作

    应用: 1.拖拽排序2.拖拽上传3.拖拽裁剪 拖拽流程 确定可拖拽的内容-->开始拖拽-->拖拽过程-->结束拖拽...

  • Html5 + Css 3 文件拖拽上传功能

    拖拽上传文件功能 拖拽事件 拖拽元素ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart应用...

  • 拖拽上传

    拖拽事件 拖拽元素ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart应用于拖拽元素,...

  • js:拖拽事件

    拖拽事件 ondragstart当拖拽元素被开始拖拽时,event:拖拽元素。[从操作系统向浏览器拖拽文件不会触发...

  • HTML 5 拖拽

    @(HTML5)[HTML 5拖拽] [TOC] 十三、HTML 5 拖拽 HTML 5 拖拽事件 图片自带拖拽功...

  • JQuery UI 拖拽排序

    禁用拖拽: 启用拖拽:

  • MacOS 开发(十六) : 文件拖拽

    文件拖拽的核心是拖拽目标视图 (DragDestinationView),此方法会检测目标是否可拖拽类型,拖拽文件...

  • HTML5拖拽上传

    传统拖拽效果小demohtml5实现拖拽小demo调查问卷小demo拖拽拼图小demo拖拽上传小demo h5拖拽...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • 元素拖曳 H5

    拖拽 如何让一个元素变成拖拽元素 draggable=‘true’ ondrag 应用于拖拽元素,整个拖拽过程都会...

网友评论

      本文标题:拖拽

      本文链接:https://www.haomeiwen.com/subject/qdomnftx.html