Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.
- 高洛峰원래의
- 2017-03-12 16:42:301581검색
dataTransfer를 통해 브라우저의 기본 데이터 처리를 방지하려면 preventDefault()를 호출하세요(드롭 이벤트 의 기본 동작은 링크로 여는 것입니다). getData(Text) 메소드는 드래그된 데이터를 가져옵니다. 관심있는 친구들은 원래 효과를 참조할 수 있습니다
효과 드래그 후
코드는 다음과 같습니다
코드는 다음과 같습니다
[code]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#p1, #p2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다." >
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
</p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
</body>
</html>
[/code] 조금 복잡해 보일 수도 있지만 드래그 앤 드롭 이벤트의 여러 부분을 별도로 연구할 수 있습니다.
요소를 드래그 가능으로 설정
먼저 요소를 드래그 가능하게 만들려면 드래그 가능 코드는 다음과 같습니다.<img draggable="true" / alt="Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다." >
드래그할 내용 - ondragstart 및 setData()
그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정합니다. 위 예에서 ondragstart 속성은 드래그할 데이터를 지정하는함수 , drag(event)를 호출합니다.
dataTransfer.setData() 메소드는 데이터 유형과 드래그된 데이터의 값을 설정합니다.
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
} 이 예에서 데이터 유형은 "텍스트"이고 값은 드래그 가능한 요소("drag1")의 ID입니다.
위치 위치 - ondragover
ondragover 이벤트는 드래그된 데이터를 위치할 위치를 지정합니다. 기본적으로 데이터/요소는 다른 요소 안에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다. ondragover 이벤트의event.preventDefault() 메서드를 호출하여 배치됩니다.
event.preventDefault()
- ondrop
드래그된 데이터가 배치되면 드롭 이벤트가 발생합니다. 위 예에서 ondrop 속성은 drop(event) 함수를 호출합니다.
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
코드 설명:
dataTransfer.getData를 통해 얻은 브라우저의 기본 데이터 처리(드롭 이벤트의 기본 동작은 링크로 여는 것임)를 방지하려면 PreventDefault()를 호출하세요. ("텍스트") 메서드 드래그되는 데이터입니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다. 드래그된 데이터는 드래그된 요소의 ID("drag1")입니다. 드래그된 요소를 배치된 요소(대상 요소)에 추가합니다.위 내용은 Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 등록 페이지 샘플 코드다음 기사：HTML5 등록 페이지 샘플 코드