1.0.4 drag和drop拖放标签

科技前沿 • 2025-03-08 21:37 • 阅读 62

大家好，我是讯享网，很高兴认识大家。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。
—-将图片拖入到DIV中 dragg.html
<!DOCTYPE html>
<html>
<title>将图片拖入到DIV中</title>
<head>
<style type=“text/css”>
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type=“text/javascript”>
//设置被拖动的数据
function drag(event){
//设置备拖动数据的数据类型和值
//本例中数据类型为Text，值是可拖动元素的id(“drag1”)
event.dataTransfer.setData(“Text”,event.target.id);
}

//设置在何处放置备拖动的数据
function drop(event){
//当放置被拖动时会触发该事件
//默认地，无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式
event.preventDefault();
}

//放置设置
function allowDrop(event){
//调用preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接方式打开）
event.preventDefault();
//通过dataTransfer.getData(“Text”)方法获取被拖的数据，该方法将返回在setData()中的设置的相同类型的任何数据
var data=event.dataTransfer.getData(“Text”);
//把被拖元素追加到放置元素中
event.target.appendChild(document.getElementById(data));
}

</script>
</head>
<body>
<p> 请将图片拖到矩形中：</p>
<div id=“div1” οndrοp=“drop(event)” οndragοver=“allowDrop(event)”>

</div>
<br/>
<img id=“drag1” src=“w3school_banner.gif” draggable=“true” οndragstart=“drag(event)”></img>
</body>
</html>

@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai

讯享网

1.0.4 drag和drop拖放标签

相关推荐