列：
图片的拖拽
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.οndragοver=dragover; //拖到那里dorbox1.οndragοver=dragover; //拖到那里imgbox.οndragοver=dragover; //拖到那里dorbox.οndrοp=dorp;//放在那里dorbox1.οndrοp=dorp;//放在那里imgbox.οndrοp=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 ;width: 200px;height: 200px;background-color: #000000;} img{float: left;width: 50px;height: 50px; } #imgbox{width:800px;height: 900px;border: solid 1px #000000; }
)
