JS实现简单的拖拽效果

更新时间：2023年09月02日 08:18:17 作者：编程三昧

拖拽是前端实现中比较常用的一种效果, 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实现拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS
拖拽

js判断运行jsp页面的浏览器类型以及版本示例
做了一个判断浏览器类型和版本号的业务，记录下相关的js代码，个人感觉还不错，需要的朋友可以参考下
2013-10-10
js 实现css风格选择器（压缩后2KB）
近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人，找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB
2012-01-01
详解JavaScript中的构造器Constructor模式
构造器Constructor不能被继承，因此不能重写Overriding，但可以被重载Overloading。通过本文给大家分享JavaScript中的构造器Constructor模式，对构造器constructor相关知识感兴趣的朋友一起学习吧
2016-01-01
在JavaScript中如何访问暂未存在的嵌套对象
这篇文章主要给大家介绍了关于在JavaScript中如何访问暂未存在的嵌套对象的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
JavaScript Map实现原理与底层结构详解
哈希表（也称为哈希表）是一种基于键直接访问内存存储位置的数据结构。也就是说，它通过计算一个键值函数来加速查找，该函数将要查询的数据映射到表中的某个位置。该映射函数称为散列函数，记录数组称为散列表
2022-09-09
详解JS事件循环及宏任务微任务的原理
在js中，我们一般将所有的任务都分成两类，一种是同步任务，另外一种是异步任务。而在异步任务中，又有着更加细致的分类，那就是微任务和宏任务。本文将详细讲解这二者的原理与使用，需要的可以参考一下
2022-05-05
javascript HTML5 Canvas实现圆盘抽奖功能
这篇文章主要为大家详细介绍了javascript HTML5 Canvas实现圆盘抽奖功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-04-04
uni-app中renderjs使用的方式浅析
renderjs是一个运行在视图层的js,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于uni-app中renderjs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
Js与Jq获取浏览器和对象值的方法
这篇文章主要介绍了 Js与Jq获取浏览器和对象值的方法的相关资料,需要的朋友可以参考下
2016-03-03
详解webpack引入第三方库的方式以及注意事项
这篇文章主要介绍了详解webpack引入第三方库的方式以及注意事项，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01