拖放是很常见的一种交互效果, 很多时候我们都会借助于第三方的控件来实现, 其实用原生 JS 实现起来也非常的方便. 接下来我们就用原生 JS 和 CSS 快速实现这样的拖放效果:
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>
注意点: 1. 容器的的 class 为 droppable, 用于接收被拖拽的元素, 可被拖拽的元素 class 为 draggable, 同时设置 draggable 属性为 true, 表示该元素可以被拖拽. 2. 默认情况下, 只有图片, 链接还有被选中的文字能被拖拽, 其他元素需要设置 draggable 为 true 才能被拖拽. 所以为了凸显 draggable 的用法, 这里使用 < div > 而不是 < image > 来作为被拖拽的元素.
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;
- }
注意点: 1. 图片来源于 https://source.unsplash.com / 的随机图片; 2. .dragging 为 draggable 元素正在被拖动的状态, 增加黄色 border;3. .drag-over 为 draggable 元素被拖动到容器上方时容器的状态, 增加灰色虚线 border.
JS
最后, 我们需要通过 JS 监听 draggable 和 droppable 的相关的事件.
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);
- }
注意点: 1. 当 draggable 元素被拖动时, 原来容器中的 draggable 元素并不会消失, 需要我们手动将其隐藏 (class 设置为 invisible), 如果同步操作会立马触发 dragend 事件导致拖动效果消失, 所以在 setTimeout 的回调中异步设置可确保拖动操作开始后再隐藏 draggable 元素; 2. 在 dragEnter 和 dragOver 方法中我们需要通过 preventDefault 来取消事件以表明容器是一个合法的 droppable 元素, 不然容器的 drop 事件将无法触发, 接下来的操作也将无法进行, 详细解释请参考 MDN DropTarget;3. 在 dragDrop 方法中直接使用 append 方法将 draggable 元素移动至当前容器下面.
好了, demo 比较简单, 但是细节还是有一些的, 自己实践一下才能更深刻的领悟.
来源: http://www.jianshu.com/p/5c06e46a37bf