Question

我有一个div，其中有一个image1。当我将新的image2拖放到上一个image1上时，我的新image2将被隐藏，并且前一个image1正在显示。而且当我将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

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

0 个答案: