html怎么移动div里的字体,实现拖动div里面的字体

该博客介绍了一段JavaScript代码,用于实现在网页上拖动p元素在两个矩形框之间移动的功能。代码涉及到dragStart、dragEnd、allowDrop和drop等事件处理函数,但指出Internet Explorer 8及更早版本和Safari 5.1及更早版本不支持drag事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

demo

.droptarget {

float: left;

width: 100px;

height: 35px;

margin: 15px;

padding: 10px;

border: 1px solid #aaaaaa;

}

在两个矩形框中来回拖动 p 元素:

拖动我!

注意:Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。

function dragStart(event) {

event.dataTransfer.setData("Text", event.target.id);

document.getElementById("demo").innerHTML = "开始拖动 p 元素";

}

function dragEnd(event) {

document.getElementById("demo").innerHTML = "完成 p 元素的拖动。";

}

function allowDrop(event) {

event.preventDefault();

}

function drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值