在html5中如何将一个图像拖放到另一个图像上_Html_Drag And Drop

在html5中如何将一个图像拖放到另一个图像上

html

在html5中如何将一个图像拖放到另一个图像上,html,drag-and-drop,Html,Drag And Drop,我有一个div，里面有一个image1。当我将新图像2拖放到上一个图像1上时，我的新图像2将隐藏，而上一个图像1将显示。还有，当我把image2从那个div中拖拽出来时，我想找回我以前的image1 所以我想克服这个问题 ____________________________________________ 发布部分代码更新了部分代码 <!DOCTYPE HTML> <html> <head> <title>Demo</title>

我有一个div，里面有一个image1。当我将新图像2拖放到上一个图像1上时，我的新图像2将隐藏，而上一个图像1将显示。还有，当我把image2从那个div中拖拽出来时，我想找回我以前的image1 所以我想克服这个问题 ____________________________________________

发布部分代码更新了部分代码

<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
<style type="text/css">



div[id^="place"]

{float:left; 
width:80px; 
height:80px;
 margin:3px;
 padding:3px;
 border:1px dotted #333333;
 background-color:#ffff99;
}

span
{float:left;
 width:80px;
 margin:3px;
 padding:3px;
 border:1px solid #999999;
 color:#333333;
}
.pics, .nums
{
clear:both; 
text-align:center;
}
</style>

<script type="text/javascript">


function dragIt(theEvent) {



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

}

    function dropIt(theEvent) {

    var theData = theEvent.dataTransfer.getData("Text");

    var theDraggedElement = document.getElementById(theData);

    theEvent.target.appendChild(theDraggedElement);

    theEvent.preventDefault();
    }
</script>
</head>
<body>

<p>This is a demo </p>

<!--element with draggable pictures-->

    <div class="pics">
        <div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
            <img src="pic1.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />
        </div>
        <div id="place2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
            <img src="pic2.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic2" />
        </div>
        <div id="place3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
        </div>
        <div id="place4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
        </div>
        <div id="place5" ondrop="dropIt(event);" ondragover="event.preventDefault();">
        </div>
    </div>


<div class="nums">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

</body>
</html>

enter code here