拖拽事件

拖拽事件

https://www.cnblogs.com/moqiutao/p/6365113.html

抓取对象以后拖放到另一个位置

选中

1 .在HTML5标准中，为了使元素可拖动，把draggable属性设置为true
2 .文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true
3 .图片和链接按住鼠标左键选中，就可以拖放
4 .文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放
5 .拖动的时候跟着一个禁用的按钮，真的丑

完全自己实现拖拽的问题，主要是放下去的时候有点麻烦，不知道这俩能不能结合，

拖动

0 .被拖动的元素
1 .拖动开始--拖动过程--拖动结束
2 .dragstart 在元素开始被拖动时候触发
3 .drag 在元素被拖动时反复触发
4 .dragend 在拖动操作完成时触发

0 目的地元素
1 .dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
2 .dragover 当被拖动元素在目的地元素内时触发
3 .dragleave 当被拖动元素没有放下就离开目的地元素时触发
4 .dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

释放

1 .drop 当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

dataTransfer对象

1 .dataTransfer对象出现在拖拽事件中，包括dragstart,dragend,dragover,dragenter,dragleave,drop
2 .属性

1 .DataTransfer.dropEffect：获取当前所拖放操作的类型，或者将拖拽操作设置为新类型.值必须为none,copy,link,move
2 .DataTransfer.effectAllowed:提供所有可能的所有类型的操作。必须是none,copy,copyLink,copyMove,link,linkMove,move,all,uninitialized
3 .DataTransfer.files:当前拖放的文件,如果拖拽的不是文件，那么这一项是空的
4 .DataTransfer.items:DataTransferItemList对象，对象是所有拖动数据的列表
5 .DataTransfer.types：在dragstart事件中设置数据格式，返回的是一个字符串数组

3 .标准方法

1 .clearData('key'):删除与给定类型关联的数据。
2 .getData('key'):返回给定类型的数据，如果该类型的数据不存在或数据传输不包括数据，返回空字符串
3 .DataTransfer.setData("key","value"):设置给定类型的数据，如果该类型的数据不存在，就在末尾添加，如果有就替换
4 .DataTransfer.setDragImage(img,xOffset,yOffset)：用于设置拖动的自定义图像
5 .

dropEffect

1 .当拖拽div到了可释放区域，鼠标的形状，万恶的是拖拽没到可释放区域的形状不能设置
2 .主要值

1 .move
2 .copy
3 .link
4 .none

3 .dropEffect属性的设置主要在drageenter和dragover事件中，同时受到effectAllowed属性影响

DataTransfer.effectAllowed

1 .表示拖拽允许的效果，支持的属性比较多
2 .uninitialized:默认值，表示未初始化，从效果上来说，和all是一样
3 .none:不允许拖拽，鼠标保持禁止状态。妈的，就是这个属性。
4 .copy：可以在新位置复制元素
5 .copyLink；允许复制和链接操作
6 .link:可以在新位置建立链接
7 .copyMove:允许复制和移动操作
8 .move:可以把元素移动到新位置

判断拖拽物体的类型

handleDataTransferItems = function (items) {
  for (var i = 0; i < items.length; i += 1) {
    var kind = items[i].kind;
    var type = items[i].type;
    // 逻辑开始
    if (kind == 'string') {
      if (type.indexOf('text/plain') != -1) {
        items[i].getAsString(function (str) {
          // str是纯文本，该怎么处理，就在这里处理
        });   
      } else if (type.indexOf('text/html') != -1) {
        items[i].getAsString(function (str) {
          // str是富文本，就在这里处理
        });
      } else if (type.indexOf('text/uri-list') != -1) {
        items[i].getAsString(function (str) {
          // str是uri地址，在这里进行处理
        });
      }
    } else if (kind == 'file') {
      // 如果是图片
      if (type.indexOf('image/') != -1) {
        var file = items[i].getAsFile();
        // file就是图片文件对象，可以上传，或者其他处理
      }
    }
  }
};

最后编辑于：2020.08.24 21:08:11