JS实现简单的拖拽效果

拖拽是前端实现中比较常用的一种效果, HTML5 提供了较为强大的拖拽 API 支持,今天我们来实现一个简单的拖拽效果。

实现

html 复制代码
<div>
    <div id="source" ondragstart="dragstart_handler(event);" draggable="true">
        把我拖拽到下方啊!
    </div>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">目标区域</div>

稍微添加点样式:

css 复制代码
div {
    margin: 0em;
    padding: 2em;
}

#source {
    color: #009688;
    border: 1px solid #009688;
}

#target {
    border: 1px solid black;
}

JS脚本如下:

javascript 复制代码
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();
}

总结

今天这只是个简单的示例,后续我们可以在此基础上实现更多的效果。

相关推荐
患得患失9491 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu1 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子1 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖1 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
qq_12498707532 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞2 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_013 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭3 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育3 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育