<!DOCTYPE HTML>
<html >
<head >
<title >Example</title>
<style type="text/css">
#src>*{
    float: left;
}
#target,#src>img{
    border: thin solid black;
    padding: 2px;
    margin: 4px;
    height: 100px;
    width: 100px;
}
#target{
    height: 123px;
    width: 220px;
    text-align: center;
    display: table;
}
#target>p{
    display: table-cell;
    vertical-align: middle;
}
#target>img{
    margin: 1px;
}
img.dragged{
    background-color: orange;
}
</style>
</head>
<body >
<div id="src">
<img src="../../Public/Pictures/Sample Pictures/Hydrangeas.jpg" width="1024" height="768" id="tu1" alt="tu1" draggable="true">
<img src="../../Public/Pictures/Sample Pictures/Lighthouse.jpg" width="1024" height="768" id="tu2" alt="tu2" draggable="true">
<img src="../../Public/Pictures/Sample Pictures/Tulips.jpg" width="1024" height="768" id="tu3" alt="tu3" draggable="true">
html5源代码免费
<div id="target">
<p id="msg">drop here</p>
</div>
</div>
<script >
    var ElementById("src");
    var ElementById("target");
    var ElementById("msg");
       
    var draggedID;
    dragenter=handleDrag;
    dragover=handleDrag;
    function handleDrag(e){
        e.preventDefault();
    }
   
    drop=function(e){
        var ElementById(draggedID).cloneNode(false);
        target.innerHTML="";
        target.appendChild(newElem);
        e.prevenDefault();
    }
       
    dragstart=function(e){
        draggedID=e.target.id;
        e.dataTransfer.setData("Text",draggedID);
        e.target.classList.add("dragged");
    }
   
    dragend=function(e){
        var elems=document.querySelectorAll(".dragged");
        for(var i=0;i<elems.length;i++){
        elems[i].ve("dragged");
        }
    }
   
    drag=function(e){
        msg.innerHtml=e.target.id;   
    }
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。