一次拖放多个html元素

Question

是否有HTML5默认方式将多个元素拖放到同一页面上的另一个html元素中？

似乎draggable适用于一个元素的HTML5属性说:"你可以拖我,但你需要多个输入设备来同时选择另一个可拖动元素."

作为一种解决方法,可以使用js为所选元素添加标识符,并获取特定事件上的所有选定元素并执行我们想要的操作.但这真的是"正确的"方式吗？

当您检查drop事件时,在处理文件拖放时会有多个文件的接口.还有items房产 - 至少在Chrome中.

浏览器之间存在差异.

在Chrome中

该drop活动包含该items属性

dataTransfer: DataTransfer
    items: DataTransferItemList
        length: 0

Items 似乎是0,无论你是否拖动了一个项目.

在Firefox中

该drop活动包含该mozItemCount属性

dataTransfer: DataTransfer
    mozItemCount: 1

mozItemCount 似乎至少是1.

---

这是一个小小的演示

您可以在哪里观察开发人员工具控制台:

这个来源取自这里:http://www.html5rocks.com/en/tutorials/dnd/basics/

$(function(){
  // Copied from: http://www.html5rocks.com/en/tutorials/dnd/basics/
  var cols_ = document.querySelectorAll('.column');
  var dragSrcEl_ = null;

  handleDragStart = function(e) {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);

    dragSrcEl_ = this;

    this.style.opacity = '0.4';

    // this/e.target is the source node.
    $(this).addClass('moving');
  };

  handleDragOver = function(e) {
    if (e.preventDefault) {
      e.preventDefault(); // Allows us to drop.
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  };

  handleDragEnter = function(e) {
    $(this).addClass('over');
  };

  handleDragLeave = function(e) {
    // this/e.target is previous target element.

    $(this).removeClass('over');
  };

  handleDrop = function(e) {
    // this/e.target is current target element.
    console.log(e.dataTransfer);

    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    // Don't do anything if we're dropping on the same column we're dragging.
    if (dragSrcEl_ != this) {
      dragSrcEl_.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }

    return false;
  };

  handleDragEnd = function(e) {
    // this/e.target is the source node.
    this.style.opacity = '1';

    [].forEach.call(cols_, function (col) {
      $(col).removeClass('over');
      $(col).removeClass('moving');
    });
  };

  [].forEach.call(cols_, function (col) {
    col.setAttribute('draggable', 'true');  // Enable columns to be draggable.
    col.addEventListener('dragstart', this.handleDragStart, false);
    col.addEventListener('dragenter', this.handleDragEnter, false);
    col.addEventListener('dragover', this.handleDragOver, false);
    col.addEventListener('dragleave', this.handleDragLeave, false);
    col.addEventListener('drop', this.handleDrop, false);
    col.addEventListener('dragend', this.handleDragEnd, false);
  });
});

.column {
  height: 150px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  border-radius: 10px;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
  margin-bottom: 30px;
}
.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.column {
 transition: transform 0.2s ease-out;
}
.column.over {
  border: 2px dashed #000;
}
.column.moving {
  opacity: 0.25;
  transform: scale(0.8);
}
.column .count {
  padding-top: 15px;
  font-weight: bold;
  text-shadow: #fff 0 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 
<div class="cols">
  <div class="column">
    <header>C</header>
  </div>
  <div class="column">
    <header>B</header>
  </div>
  <div class="column">
    <header>A</header>
  </div>
</div>

---

所以看起来供应商正准备拖放多项,但似乎没有默认值.如果我错了,请纠正我.

我阅读这些文章是为了更好地理解dnd

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop
• http://html5doctor.com/native-drag-and-drop/

进一步阅读:

• 的定义 DataTransferItemList
• MDN采用DataTransfer接口
• MDN的多标准拖放方法

Answer 1

首先,Chrome 的items长度和files长度都有效.总是得到0长度,因为拖放数据存储中的信息受到保护,除了drop事件.因此,当您记录对象并在之后查看它时,您无权访问该信息.但如果你这样记录:

console.log(e.dataTransfer.items.length);

然后你就可以访问实际的长度了.请看这里protected mode:

https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

这并不是说它会给你拖动元素的数量,并且有几个原因可以解释为什么:

首先,本机drag and drop API还用于从浏览器拖动到其他应用程序,反之亦然.所以很多功能都处理这些情况.

另外一点是,拖放API使您可以访问浏览器拖拽事物的默认行为.例如,在浏览器中拖动链接将打开该链接.使用API​​时,您正在访问这些行为.

这个API的许多行为都是这样的结果,并且在这个意义上并不是真正意图拖动DOM元素.为此,其他库可能更适合或仅通过它提供的不同事件来管理内容本身.

由于您可以从其他应用程序拖放元素,因此很多信息都与此有关.例如dataTransferItem,您可以访问fileList对象.这仅在将文件从操作系统拖入浏览器时有效.所以你有一些文件,拖动了不同的文件.但这与拖延无关DOM elements.

您也可以从浏览器中拖动.非常有用,例如,如果要将HTML内容拖动到Word.但是转移的信息比简单的DOM元素更复杂.在这种情况下,你是拖动items,但这些items不是每个说的DOM元素.它们是可以转移的不同类型的东西.

可以传输的东西类型在实现方面有很大差异,但基本上你可以使用纯文本,HTML内容和链接.所以项目的长度将是可用类型的长度.例如,在下面的jsfiddle中,在Chrome上,您可以拖动图像,链接和纯文本(对于这个,您只需要选择文本).的结果 :

 console.log(e.dataTransfer.items.length, 
e.dataTransfer.getData('text/plain'), 
e.dataTransfer.getData('text/uri-list'), 
e.dataTransfer.getData('text/html'));

当draggin灰色目标上的每个元素是这样的:

来自输入的纯文本:

length: 1 
 plain text: text 
 link:  
 html content: 

通过图片:

length: 2 
    plain text:  
     link: http://www.exiv2.org/include/img_1771.jpg 
     html content: <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><img id="image1" src="http://www.exiv2.org/include/img_1771.jpg">

来自链接:

length: 3 
 plain text: http://google.com/ 
 link: http://google.com/ 
 html content: <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><a href="http://google.com/">link 1</a>

见这里:http://jsfiddle.net/ztj6t2ff/9/

你会发现这html不完全是你页面上的内容.这是为了允许转移到其他应用程序并保持最佳格式.

因此,一般来说,这API允许您干扰拖动几乎任何可以在操作系统中拖动和从浏览器拖动的任何内容的默认行为.从这个意义上讲,它非常复杂,但大多数功能与在同一页面内拖动DOM元素无关.

事实上,几乎所有通过拖放操作的DOM操作都是在不使用此API的情况下完成的.jquery-ui draggable例如,完全不依赖于此API.