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>
멋진. 마우스 포인터에 요소를 삽입하는 것에 대한 정보는? – user978122
@ user978122 기본적으로 CSS를 사용하여 절대적인 위치에 배치합니다. 상위 div와 같은 여러 방법은 상대적 위치 지정을 사용하지만 드롭 다운하는 각 파일은 절대 위치 지정을 사용합니다. 아니면 절대적으로 모두 그들과 드롭 div가 어디에 계정에 걸릴. –