[DOM_Event] JS - dragstart 이벤트 (= ondragstart 속성) - 마우스드래그시작 (IE9)

dragstart 예제

 

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

 

결과보기

dragstart 정의

dragstart 구문

dragstart 예제