2012-01-06 5 views
0

드래그와 관련된 모든 정보, 마우스 포인터에서 요소를 삽입 한 다음 & 드롭과 관련된 정보를 찾고 있습니다.마우스 포인터에서 드래그, 놓기, 삽입 -> HTML5

많은 드래그를 보았습니다. 단지 요소를 텍스트 상자에 던져 넣었고 커서 효과에서 많은 삽입을 보았지만 마우스 포인터 코드에서 실제 삽입을 찾고 있습니다. 효과는 Word, Dreamweaver와 같은 대부분의 오프라인 WYSIWYG 프로그램에서 볼 수 있습니다. 프로그램 외부에서 요소를 끌어다 놓을 수 있으며 원하는 위치에서 프로그램 내부에 놓을 수 있습니다 점령하다.

감사합니다.

답변

0

HTML5 끌어서 놓기를 사용하면 드롭 핸들러에서 dataTransfer.files을 사용하여 데스크톱에서 브라우저로 파일을 가져올 수 있습니다. 드롭하면 이벤트는 MouseEvent이고 드롭 div 내의 해당 위치는 xy입니다. 예를 들어

:

<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> 
+0

멋진. 마우스 포인터에 요소를 삽입하는 것에 대한 정보는? – user978122

+0

@ user978122 기본적으로 CSS를 사용하여 절대적인 위치에 배치합니다. 상위 div와 같은 여러 방법은 상대적 위치 지정을 사용하지만 드롭 다운하는 각 파일은 절대 위치 지정을 사용합니다. 아니면 절대적으로 모두 그들과 드롭 div가 어디에 계정에 걸릴. –