Native JS Quickly Implements drag and drop Effect

  css, draggable, html, javascript

Drag-and-drop is a common interactive effect, and we often use third-party controls to implement it. In fact, it is also very convenient to implement it with native js. Next, we will use native js and css to quickly implement this drag-and-drop effect:

图片描述

HTML

The content of HTML is very simple, that is, five empty containers and one element that can be dragged:

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>

Attention:1.ContainerizedclassFordroppableFor receiving dragged elements and draggable elementsclassFordraggable, while settingdraggableThe property istrueA that indicates that the element can be dragged.2.By default, only pictures, links and selected text can be dragged, and other elements need to be set.draggableFortrueTo be dragged. So in order to highlightdraggableThe use of, used here.<div>rather than<image>As a dragged element.

CSS

When implementing styles, in addition to static styles, some transition states also need to add styles to enhance visual experience:1.Add border and other effects when the element is dragged;2.When an element is dragged over a container, the container should also add a style to indicate that the container can receive a dragged element.

css:

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

Attention:1.The picture comes fromhttps://source.unsplash.com/Random pictures of;2. .draggingAdds a yellow border; to the state where the draggable element is being dragged;3. .drag-overAdds a gray dashed border to the state of the container when the draggable element is dragged over the container.

JS

Finally, we need to monitor through jsdraggableAnddroppableRelated events of the.

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);
}

Attention:1.When the draggable element is dragged, the draggable element in the original container will not disappear, and we need to hide it manually (classSet toinvisible), if the synchronization operation will immediately triggerdragendThe event causes the drag effect to disappear, so in thesetTimeoutThe asynchronous setting in the callback of ensures that the draggable element is hidden after the drag operation starts;2.IndragEnterAnddragOverIn the method, we need to passpreventDefaultTo cancel the event to show that the container is legaldroppableElement, otherwise the container’sdropThe event will not be triggered and the following operations will not be carried out. Please refer to for detailed explanation.MDN DropTarget;3.IndragDropDirectly used in the methodappendThe method willdraggableThe element moves below the current container.

Well, demo is relatively simple, but there are still some details. Only by practicing it can we have a deeper understanding.

Complete example:https://codepen.io/mudontire/ …