列：
图片的拖拽
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; }