拖动，拖放，插入鼠标指针 - > HTML5

我正在查找有关拖动的任何信息，然后在鼠标指针处插入一个元素。拖动，拖放，插入鼠标指针 - > HTML5

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

谢谢。

来源

2012-01-06 user978122

您可以通过使用HTML5拖放功能来执行此操作，您的拖放处理程序将使用dataTransfer.files将文件从桌面上获取到您的浏览器。一旦你下降，这个事件只是一个MouseEvent，你可以得到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>

来源

2012-01-06 10:51:23

绝佳。有关在鼠标指针坐标处插入元素的任何信息？ – user978122 2012-01-06 19:46:32

@ user978122你基本上使用CSS来定位它们的绝对位置。很多方法，比如父div具有相对定位，而每个你下拉的文件都有绝对定位。或者仅仅是绝对的，并考虑放置div的位置。 – 2012-01-07 04:51:38

拖动，拖放，插入鼠标指针 - > HTML5

回答

相关问题