分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

html5拖放

发布时间:2023-09-06 02:34责任编辑:林大明关键词:暂无标签

拖放就是抓住一个元素,拖动到另一个位置。

拖动什么?

在拖动元素里要设置draggable为true,并设置onDraggstart触发包含evet.DataTransfer.setData("Text",evet.target.id)

<image draggable="true" onDraggStart="drag(evet)">

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.Target.id);

}

放到哪里?

元素默认不允许其它元素放置的,但可以通过preventDefault()改变默认处理方式。

放置的时候,获取transfer里设置的数据;

然后将对应元素追加到目标元素上。

<div ondrop="drop(event)" ondragOver="allowdrop(event)">

</div>

function allowdrop(ev)

{

ev.preventDefault();

}

function drop(ev)

{

ev.preventDefault();

var a=ev.dataTransfer.getData();

ev.target.appendChild(document.getElementById(a))

}

html5拖放

原文地址:https://www.cnblogs.com/Zhengxiaoxiao/p/10503537.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved