• 회원가입
  • 로그인

[DOM_Event] JS - dragend 이벤트 (= ondragend 속성) - 마우스드래그종료 (IE9)

dragend 예제

 

<style>

.droptarget {

  float: left; 

  width: 150px; 

  height: 50px;

  margin: 15px;

  padding: 10px;

  border: 1px solid silver;

}

div p {border:1px solid red;}

#demo {clear:both;}

</style>


<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">

  <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Homzzang.com</p>

</div>


<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<p id="demo"></p>


<script>

function dragStart(event) {

  event.dataTransfer.setData("Text", event.target.id);

  document.getElementById("demo").innerHTML = "드래그 시작";

}


function dragEnd(event) {

  document.getElementById("demo").innerHTML = "드래그 종료";

}


function allowDrop(event) {

  event.preventDefault();

}


function drop(event) {

  event.preventDefault();

  var data = event.dataTransfer.getData("Text");

  event.target.appendChild(document.getElementById(data));

}

</script> 

 

결과보기

 

 

dragend 정의

 

 

 

 

 

dragend 구문

 

 

 

 

 

dragend 예제

 

 

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012