I encountered a drag and drop effect implementation in the process of doing the project before. The business scenario is to add courses by manually dragging and dropping for the curriculum schedule. Look at the H5 new element, there is a drag and drop effect, so I wrote a demo, the effect is as follows:

<! -- Course Elements -->
<div class="list">
	<div class="item blue" id="html" draggable="true" ondragstart="start(event)">HTML</div>
	<div class="item pink" id="css" draggable="true" ondragstart="start(event)">CSS</div>
	<div class="item green" id="js" draggable="true" ondragstart="start(event)">JS</div>
</div>

<! -- Area to be placed -->
<div id="web" ondrop="drop(event)" ondragover="toOver(event)">
	<div style="font-weight: bold;">The curriculum:</div>
</div>
Copy the code

First, to make the element dragable, set the draggable property to true:

<div draggable="true" />
Copy the code

Next, specify the event that is triggered when the element is dragged. In the HTML code above, the onDragStart attribute calls a function, start(event), that is triggered when the element is dragged. The onDragover event is defined on the region element to be placed and is triggered when the mouse drags the element over the region. The onDrop event is triggered when an element is dragged to the specified area and the mouse is released.

The CSS code:

.list {
	display: flex;
}

.item {
	width: 100px;
	height: 40px;
	margin: 10px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 10px;
}

.blue {
	background-color: royalblue;
}

.pink {
	background-color: deeppink;
}

.green {
	background-color: forestgreen;
}

#web {
	width: 150px;
	height: 220px;
	border: 1px solid # 000;
	position: absolute;
	top: 150px;
	left: 100px;
	box-sizing: border-box;
	padding: 10px;
}
Copy the code

There’s nothing to say about CSS, see for yourself.

JavaScript code:

// Start dragging elements
function start(ev) {
	id = ev.target.id; // Get the ID of the drag element
}

// The area to place
function toOver(ev) {
	ev.preventDefault(); // Block the default event
}

// The method to place the element
function drop(ev) {
	var app = document.getElementById(id); // Get the dragged element object
	var div = document.getElementById(ev.target.id); // Place the element object of the region

	div.appendChild(app); // Append the drag object to the drop area
}

Copy the code

The above javascript code should be viewed in conjunction with the event function on the HTML tag. The whole process is quite simple:

  1. When the mouse drags an element, the onDragStart () event is emitted to get the ID of the element to be dragged.
  2. The ondropover() event is triggered when the mouse drags the element over the specified area, where the default event is prevented from firing;
  3. When the mouse drops an element to the specified region and releases the mouse, the onDrop () event is triggered to retrieve the object of the element and append it to the node where the region is placed.