JS实现简单的拖拽效果
作者：编程三昧
拖拽是前端实现中比较常用的一种效果, HTML5 提供了较为强大的拖拽 API 支持,今天我们来实现一个简单的拖拽效果,需要的朋友可以参考下
实现
<div>
<div id="source" ondragstart="dragstart_handler(event);" draggable="true">
把我拖拽到下方啊！
</div>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">目标区域</div>稍微添加点样式：
div {
margin: 0em;
padding: 2em;
}
#source {
color: #009688;
border: 1px solid #009688;
}
#target {
border: 1px solid black;
}JS脚本如下：
function dragstart_handler(event) {
console.log("dragStart");
// 设置拖动的格式和数据::使用事件目标的 id 作为数据
event.dataTransfer.setData("text/plain", event.target.id);
}
function dragover_handler(event) {
console.log("dragOver");
event.preventDefault();
}
function drop_handler(event) {
console.log("Drop");
event.preventDefault();
// 获取拖放目标的 id 数据
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
event.dataTransfer.clearData();
}总结
今天这只是个简单的示例，后续我们可以在此基础上实现更多的效果。
到此这篇关于JS实现简单的拖拽效果的文章就介绍到这了,更多相关JS实现拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！