本文共 1340 字，大约阅读时间需要 4 分钟。

之前做项目过程中遇到了一个拖放的效果实现，业务场景是为课程表手动拖拽添加课程。翻看了一下H5新增元素里面，有实现拖放的效果，于是就写了一个demo，效果如下图：

   
   
	
    
     HTML
    
	
    
     CSS
    
	
    
     JS
    
   
   
   
	
    
     课程表：
    
   

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

然后，规定当元素被拖动时触发的事件，在上面的HTML代码中，ondragstart 属性调用了一个函数，start(event)，该事件方法是在拖拽元素时触发。

CSS代码：

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

CSS没什么可说的，自己看吧。

JavaScript代码：

//开始拖拽元素function start(ev) {   	id = ev.target.id; //获取拖拽元素的ID}//要放置的区域function toOver(ev) {   	ev.preventDefault(); //阻止默认事件}//放置元素的方法function drop(ev) {   	var app = document.getElementById(id); // 获取拖动的元素对象	var div = document.getElementById(ev.target.id); // 放置区域的元素对象	div.appendChild(app); // 把拖拽对象追加到放置区域中}

上面的JS代码要配合着HTML标签上的事件函数查看，其实，整个过程很简单：

1. 当鼠标拖动元素时，触发 ondragstart() 事件，获取要拖动元素的ID；
2. 当鼠标拖拽着元素放置到指定区域时，触发 ondropover() 事件，在这里要阻止默认事件的触发；
3. 当鼠标拖拽元素到指定区域，并松开鼠标时，触发 ondrop() 事件，获取拖拽元素的对象，追加到放置区域的节点内部；

转载地址：http://ykuk.baihongyu.com/