html拖拽切换样式

最新推荐文章于 2024-08-08 23:38:27 发布

目の前にあている

最新推荐文章于 2024-08-08 23:38:27 发布

阅读量1k

点赞数

分类专栏： mygal

本文链接：https://blog.csdn.net/qq_41371197/article/details/102384599

版权

mygal 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("mae",ev.path[1].id);
}


function drop(ev)
{
var mae = document.getElementById( ev.dataTransfer.getData("mae"));
var target = ev.target;
	if(mae && target.id != 'drag1'){
    	 mae.style.background='white';
       	 mae.style.color='black';
       		 target.appendChild(document.getElementById('drag1'));

        target.style.background='red';
        target.style.color='white';
	}
  

 
}
</script>
</head>
<body>

<p>请把图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">ss
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart=drag(event) />
</div>
<br />

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
</body>
</html>