js拖拽

发表于

一个典型的drag操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。

拖拽相关事件:

​ drag: 在拖动元素或文本选择时触发.

​ dragend: 拖拽结束时触发.

​ dragenter: 拖动元素或文本选择进入有效放置目标时触发.

​ dragexit: 元素不再是拖动操作的立即选择目标时触发.

​ dragleave: 拖动元素或文本选择离开有效放置目标时触发.

​ dragover: 将元素或文本选择拖动到有效放置目标上时(每几百毫秒)触发.

​ dragstart: 用户开始拖动元素或文本选择时触发.

​ drop: 将元素或文本选择放置在有效放置目标上时触发

完整代码

设置draggable=”true”, 表示元素可拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-tuozhuai1',
  template: `
<div class="box" draggable="true" (dragstart) = 'dragstart($event)' (dragend)="dragend($event)"></div>
<div class="box1" draggable="true" (dragstart) = 'dragstart($event)' (dragend)="dragend($event)"></div>`,
  styles: [`.box{
  width: 200px;
  height: 200px;
  background: rgba(165, 252, 255, 0.65);
  position: absolute;
  left: 200px;
}
.box1{
  width: 100px;
  height: 200px;
  background: rgba(184, 157, 255, 0.71);
  position: absolute;
  left: 150px;
  top: 400px;
}`]
})
export class Tuozhuai1Component implements OnInit {
  point: any;

  constructor() {
  }

  ngOnInit() {
  }

  // 记录下开始拖拽时的位置
  dragstart(e) {
    this.point = {
      x: e.clientX - e.path[0].offsetLeft,
      y: e.clientY - e.path[0].offsetTop
    };
  }
// 结束拖拽时, 改变元素位置
  dragend(e) {
    e.path[0].style.left = e.clientX - this.point.x + 'px';
    e.path[0].style.top = e.clientY - this.point.y + 'px';
  }

}