Question

我正在寻找有关阻力和阻力的任何信息。删除，然后在鼠标指针处插入元素。

我看到了很多拖累和drop只是将一个元素抛出到一个文本框中，我看到很多插入光标效果，但我正在寻找鼠标指针代码的真正插入。大多数离线WYSIWYG程序（如Word，Dreamweaver等）都可以看到效果，您可以从程序外部拖放元素（如图像），然后在程序中将其释放到您希望的位置。占据。

谢谢。

Answer 1

您可以通过使用HTML5拖放操作来执行此操作，您的放置处理程序将使用dataTransfer.files将文件从您的桌面获取到您的浏览器。一旦您放弃，该活动仅为MouseEvent，您可以在放置div中获取该位置的x和y。

例如：

<html>
<style>
#drop {
  border: 2px solid #eee;
  text-align: center;
  padding: 20px;
}
</style>

<div id="drop">Drop files here</div>

<script>
function handleDrop(e) {
  e.stopPropagation();
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; f = files[i]; i++) {
    console.log('File: ' + f.name + ' dropped in the div in [' + e.x + ', ' + e.y + ']');
  }
}

function handleDragOver(e) {
  e.stopPropagation();
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
}

var dropTarget = document.getElementById('drop');
dropTarget.addEventListener('dragover', handleDragOver, false);
dropTarget.addEventListener('drop', handleDrop, false);
</script>
</html>

拖动，拖放，鼠标指针插入 - ＆gt; HTML5

1 个答案: