拖拽

 列：
  图片的拖拽
html:

(function(){
    var dorbox=document.getElementById('dorbox');
    var dorbox1=document.getElementById('dorbox1');
    var imgbox=document.getElementById('imgbox');
 $('img').mousedown(function(){
     var id= $(this).attr("id");
     var myimg=document.getElementById(id);
     myimg.ondragstart=drag; //托谁
    dorbox.ondragover=dragover; //拖到那里
    dorbox1.ondragover=dragover; //拖到那里
    imgbox.ondragover=dragover; //拖到那里
    dorbox.ondrop=dorp;//放在那里
    dorbox1.ondrop=dorp;//放在那里
    imgbox.ondrop=dorp;//放在那里
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function dragover(){
        event.preventDefault();
        console.log("放下!");
    }
    function dorp(ev){
        var date= ev.dataTransfer.getData('Text');
        console.log(date);
        ev.target.appendChild(document.getElementById(date));
        console.log(ev.dataTransfer.getData('Text'));
        var css=document.getElementById(date);
        var top=ev.y-25;
        var left=ev.x-25;
        css.style.cssText = "background-color:black; display:block;color:White; position:absolute;top:"+top+"px;left:"+left+"px;z-index:2;";

    }
    });
})();

ondragstart 选中目标开始选中

ondragover 拖到的过程

ondrop 放下的地点

js:

 <script src="./js/jequery.js"></script>
</head>
<body>
<div id="imgbox">
    <img src="./image/logo-1.jpg" id="myimg" alt="图片加载成功！"/>
    <img src="./image/logo-1.jpg" id="myim1" alt="图片加载成功！"/>
    <img src="./image/logo-1.jpg" id="myim2" alt="图片加载成功！"/>
    <img src="./image/logo-1.jpg" id="myim4" alt="图片加载成功！"/>
    <img src="./image/logo-1.jpg" id="myim5" alt="图片加载成功！"/>
    <img src="./image/logo-1.jpg" id="myim6" alt="图片加载成功！"/>

    <div class="div1" id="dorbox" ></div>
    <div class="div1" id="dorbox1" ></div>
</div>

css:

.div1 {
    margin-top: 100px;
    margin-left: 500px  ;
     200px;
    height: 200px;
    background-color: #000000;


}
img{
    float: left;
     50px;
    height: 50px;
}
#imgbox{
    800px;
    height: 900px;
    border: solid 1px #000000;
}