0
点赞
收藏
分享

微信扫一扫

web前端入门到实战:原生JS快速实现拖放(drag and drop)效果

拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果:

HTML

HTML的内容很简单,就是五个空的容器和一个可以被拖拽的元素:

html:

<body>
  <div class="droppable">
    <div class="draggable" draggable="true"></div>
  </div>
  <div class="droppable"></div>
  <div class="droppable"></div>
  <div class="droppable"></div>
  <div class="droppable"></div>
</body>

CSS

在实现样式的时候,除了实现静态的样式,一些过渡状态也需要增加样式以提升视觉体验:1. 元素被拖动的过程中增加边框等效果;2. 当元素被拖动到容器上方时,容器也应增加样式表明容器可以接收一个被拖拽的元素。

css:

web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
body {
  background-color: darksalmon;
}

.draggable {
  background-image: url('http://source.unsplash.com/random/150x150');
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}

.droppable {
  display: inline-block;
  height: 160px;
  width: 160px;
  margin: 10px;
  border: 3px salmon solid;
  background-color: white;
}

.dragging {
  border: 4px yellow solid;
}

.drag-over {
  background-color: #f4f4f4;
  border-style: dashed;
}

.invisible {
  display: none;
}

JS

最后,我们需要通过js监听draggabledroppable的相关的事件。

js:

// 查询draggable和droppable
const draggable = document.querySelector('.draggable');
const droppables = document.querySelectorAll('.droppable');

// 监听draggable的相关事件
draggable.addEventListener('dragstart', dragStart);
draggable.addEventListener('dragend', dragEnd);

function dragStart() {
  this.className += ' dragging';
  setTimeout(() => {
    this.className = 'invisible';
  }, 0);
}

function dragEnd() {
  this.className = 'draggable';
}

// 监听droppable的相关事件
for (const droppable of droppables) {
  droppable.addEventListener('dragover', dragOver);
  droppable.addEventListener('dragleave', dragLeave);
  droppable.addEventListener('dragenter', dragEnter);
  droppable.addEventListener('drop', dragDrop);
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' drag-over';
}

function dragLeave(e) {
  this.className = 'droppable';
}

function dragDrop(e) {
  this.className = 'droppable';
  this.append(draggable);
}

好了,demo比较简单,但是细节还是有一些的,自己实践一下才能更深刻的领悟。

举报

相关推荐

0 条评论