如何防止HTML 5中的元素拖拽到地址栏上

Question

我使用Angular的Angular -drag-and- droplists指令。它使用HTML5 API实现拖拽;下降。我注意到，当把一个元素拖到浏览器地址栏时，地址会被元素的数据重写，驱动程序会从我的站点导航出去。有没有办法防止一个元素被拖到地址栏或限制它的拖拽区域?

Answer 1

这是特定于操作系统/浏览器的，并且比您的代码允许的级别低。所以你不能在你的代码中做任何事情

Answer 2

如果你控制了dragstart事件你可以定义 effectalallowed 的拖动数据存储。这将定义您的系统如何处理您正在拖动的元素。根据放置它们的位置和内容，你有不同的选择，它们的行为也会不同。这也会影响它如何影响你的地址栏的下降。

这里有一些你可以设置的行为的例子。例如，在Chrome上，当您将效果设置为'none'时，将元素拖动到地址栏不会做任何事情，但使用'copy'它将搜索类型为'text/plain'的文本。带有'copy' effectalallowed 的图片将在浏览器中打开。

其他地方的行为也会有所不同。例如，如果您在查找器中拖动元素(在Mac OS上)，它将创建图像，或者创建内容为'text/plain'的文本文件。在Microsoft Word中，图像将插入到页面中，或者将插入'text/html'，带格式。

:

document.getElementById('noneImg').addEventListener('dragstart', setEffect)
document.getElementById('copyImg').addEventListener('dragstart', setEffect)
document.getElementById('linkImg').addEventListener('dragstart', setEffect)
document.getElementById('noneText').addEventListener('dragstart', setEffect)
document.getElementById('copyText').addEventListener('dragstart', setEffect)
document.getElementById('linkText').addEventListener('dragstart', setEffect)
function setEffect(e) {
  if(e.target.tagName === 'DIV'){
      e.dataTransfer.setData('text/plain', 'test');
      e.dataTransfer.setData('text/html', '<b>bold</b>');
  }
	e.dataTransfer.effectAllowed = e.target.className;
}

img {
  width: 80px;
  height: 80px;
}

<img id="noneImg" class="none" src="http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg"  />
<img id="copyImg" class="copy" src="http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg"  />
<img id="linkImg" class="link" src="http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg"  />
<div draggable="true" id="noneText" class="none">effect none</div>
<div draggable="true" id="copyText" class="copy">effect copy</div>
<div draggable="true" id="linkText" class="link">effect link</div>

见https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

如果您不控制dragstart事件，那么您就无能为力了。这意味着从您的操作系统或其他窗口中拖出的所有内容。

编辑:

为了澄清一点，drop的行为方式取决于3个因素:

• 的内容拖动数据存储，
• effectAllowed
• 和执行拖放的应用

您需要将每个浏览器视为不同的应用程序，因此行为将因浏览器而异，并且可能因操作系统和浏览器版本而异。例如，在我可用的浏览器上，在Chrome上， effectalallowed none不会做任何事情。但是在Firefox上，它会触发掉屏。

此外，拖放数据存储是一个复杂的数据集，您可以在其中拥有多种数据类型，并且根据应用程序将使用不同的数据类型。例如，如果你有一个'text'数据类型，它会把文本数据类型的内容放在地址栏中(在Chrome上这种情况发生在'copy' effectalallowed，而不是'link'。在Firefox中，无论定义了什么，它都会删除它)。调整行为的一种方法是使用clearData。这将清除拖动数据存储。一旦完成，您就可以根据需要定义自己的类型。例如，使用自定义类型，您可以清除所有其他行为，只保留页面中需要的行为。

例如，你可以删除，根据删除的不同，你可以访问不同的数据，并且不会与其他应用程序交互。

document.getElementById('noneImg').addEventListener('dragstart', setEffect)
document.getElementById('copyImg').addEventListener('dragstart', setEffect)
document.getElementById('linkImg').addEventListener('dragstart', setEffect)
document.getElementById('noneText').addEventListener('dragstart', setEffect)
document.getElementById('copyText').addEventListener('dragstart', setEffect)
document.getElementById('linkText').addEventListener('dragstart', setEffect)
function setEffect(e) {
  e.dataTransfer.clearData();
  e.dataTransfer.setData('custom', 'custom data');
  e.dataTransfer.setData('custom2', 'other custom data');
  e.dataTransfer.effectAllowed = e.target.className;
}
document.getElementById('drop').addEventListener('dragover', (e) => {
  e.preventDefault();
  e.target.style.backgroundColor = 'blue';
});
document.getElementById('drop').addEventListener('dragleave', (e) => {
  e.preventDefault();
  e.target.style.backgroundColor = "";
});
document.getElementById('drop').addEventListener('drop', (e) => {
  console.log(e.dataTransfer.getData('custom'));
  e.target.style.backgroundColor = "";
  e.preventDefault();
});
document.getElementById('drop2').addEventListener('dragover', (e) => {
  e.preventDefault();
  e.target.style.backgroundColor = 'blue';
});
document.getElementById('drop2').addEventListener('dragleave', (e) => {
  e.preventDefault();
  e.target.style.backgroundColor = "";
})
document.getElementById('drop2').addEventListener('drop', (e) => {
  console.log(e.dataTransfer.getData('custom2'));
  e.target.style.backgroundColor = "";
  e.preventDefault();
});

img {
  width: 80px;
  height: 80px;
}
#drop,
#drop2,
#drop3 {
  width: 200px;
  height: 200px;
  border: solid 1px black;
  float: left;
}

<img id="noneImg" class="none" src="http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg" />
<img id="copyImg" class="copy" src="http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg" />
<img id="linkImg" class="link" src="http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg" />
<div draggable="true" id="noneText" class="none">effect none</div>
<div draggable="true" id="copyText" class="copy">effect copy</div>
<div draggable="true" id="linkText" class="link">effect link</div>
<div id="drop">
</div>
<div id="drop2">
</div>