当前位置：网站首页 > 培训教程 > Html5 > 正文

HTML5拖放实例_惠州计算机HTML5培训学校

作者：黄君发布时间：2021-01-21分类：Html5浏览：1089

导读：拖放（Drag 和 drop）是 HTML5 标准的组成部分。下面的例子是一个简单的拖放实例：

下面的例子是一个简单的拖放实例：

实例

<!DOCTYPE HTML>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

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

}

function drop(ev)

{

ev.preventDefault();

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

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

}

</script>

</head>

<body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

<br>

</body>

</html>

点击咨询直接了解更多相关资料，我在惠州北大青鸟新方舟等你.