灏天阁

拖动事件

· Yin灏

正在拖动事件

任何元素实例被拖动之后，一直到拖动结束之前，都会持续发生正在拖动事件。

<div id="div01">
    Block 1
    <span id="span01">box 1</span>
    <span id="span02">box 2</span>
</div>

#div01 {
  padding: 5px;
  width: 100px;
  height: 100px;
  background-color: RoyalBlue;
}

[id^=span] {
  color: Teal;
  width: 80px;
  height: 30px;
  display: block;
  margin: 5px auto;
  text-align: center;
  background-color: GreenYellow;
}

for(let i = 1; i < 3; i++) {
  with(document.getElementById('span0' + i)) {
    draggable = true;
    ondrag = function(event) {
      console.log(`Box ${i} is draggabled...`);
    }
  }
}

拖动结束事件

for(let i = 1; i < 3; i++) {
  with(document.getElementById('span0' + i)) {
    draggable = true;
    ondrag = function(event) {
      console.log(`Box ${i} is draggabled...`);
    }
    ondragend = function(event) {
      console.log(`The dragging of Box ${i} is ended...`);
    }
  }
}

拖动进入事件

在任何元素实例被拖动当中，鼠标指针进入到另一个元素实例的瞬间，会发生拖动进入事件。

<div id="div01">
  Block 1
  <span id="span01" draggable="true">box 1</span>
  <span id="span02" draggable="true">box 2</span>
</div>
<div id="div02"></div>

div02.ondragenter = function(event) {
  console.log(`The dragged Box enters the target.`);
}

拖动离开事件

在任何元素实例被拖动当中，鼠标指针接触到上层元素实例的边缘的瞬间，会发生拖动离开事件。

div01.ondragleave = function(event) {
  console.log(`The dragged Box leaves the target.`);
}

拖动悬停事件

在任何元素实例被拖动中，鼠标指针位于特定元素实例的范围内时，会发生拖动悬停事件。

被拖动元素悬停在目标元素的上面，就会触发事件。

div02.ondragover = function(event) {
  console.log(`The dragged Box leaves the target.`);
}

拖动开始事件

div01.ondragstart = function(event) {
  console.log(`start`);
}

放下事件

拖动尚未结束之前，若鼠标指针仍然位于目标元素实例的范围内，则当鼠标左键被松开时，会发生放下事件。

<div id="div01" ondragover="event.preventDefault()">
  Block 1
  <span id="span01" draggable="true">box 1</span>
  <span id="span02" draggable="true">box 2</span>
</div>
<div id="div02" ondragover="event.preventDefault()"></div>

let ref = null;

for(let i = 1; i < 3; i++) {
  document.getElementById('span0' + i).ondragstart = function(event) {
    ref = event.target;
  }
  document.getElementById('div0' + i).ondrop = function (event) {
    event.target.appendChild(ref);
    console.log('The Box is dropped in the target.');
  }
}

- Book Lists -