本文共 1340 字,大约阅读时间需要 4 分钟。
之前做项目过程中遇到了一个拖放的效果实现,业务场景是为课程表手动拖拽添加课程。翻看了一下H5新增元素里面,有实现拖放的效果,于是就写了一个demo,效果如下图:
HTMLCSSJS课程表:
首先,为了使元素可拖动,把 draggable 属性设置为 true :
然后,规定当元素被拖动时触发的事件,在上面的HTML代码中,ondragstart 属性调用了一个函数,start(event),该事件方法是在拖拽元素时触发。
ondragover 事件是在要放置的区域元素上定义,当鼠标拖拽着元素在该区域上方时触发。 ondrop 事件是把元素拖拽到指定区域并松开鼠标时触发。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标签上的事件函数查看,其实,整个过程很简单:
转载地址:http://ykuk.baihongyu.com/