为了完成老师的要求,今天去了解的一下网页内部的拖拽,即把网页一个元素拖到网页中另一个地方。
如图
我要把左边的三张图拖动到右边的盒子里。
废话不多说,代码奉上:
<!DOCTYPE html> <html> <head> <title>拖拽</title> </head> <style type="text/css"> * { margin: 0px; padding: 0px; } .box { width: 400px; height: 300px; float: left; border: solid 5px #000; } .box img { width: 100px; height: 100px; } </style> <body> <div class="box" id="div1" οndrοp="drop(event)" οndragοver="allowDrap(event)"> <!--设置第一个盒子的事件,ondrop函数就相当于说明这个盒子可以用来拖拽,ondragover函数说明这个盒子可以拿存放拖拽过来的元素--> <img id="img1" draggable="true" οndragstart="start(event)" src="img/2.jpg"/><!--把要拖拽的元素的draggable设为true,ondragstart方法表示鼠标拖动时执行的方法--> <img id="img2" draggable="true" οndragstart="start(event)" src="img/3.jpg"/> <img id="img3" draggable="true" οndragstart="start(event)" src="img/4.jpg"/> </div> <div class="box" id="div2" οndrοp="drop(event)" οndragοver="allowDrap(event)"> <!--设置第二个盒子的事件,ondrop方法就相当于说明这个盒子可以用来拖拽,ondragover方法说明这个盒子可以拿存放拖拽过来的元素--> </div> <script type="text/javascript"> var img_id;//定义鼠标拖拽图片的id function allowDrap(e) { e.preventDefault(); /*preventDefault方法通知 Web 浏览器不要执行与事件关联的默认动作,因为浏览器默认拖拽的元素为链接,所以这个函数是为了避免浏览器执行链接动作*/ } function start(e) { img_id = e.target.id; /*e.target获得触发事件的元素,e.target.id获取当前函数的id*/ } function drop(e) { e.preventDefault(); /*preventDefault方法通知 Web 浏览器不要执行与事件关联的默认动作,因为浏览器默认拖拽的元素为链接,所以这个函数是为了避免浏览器执行链接动作*/ e.target.appendChild(document.getElementById(img_id)); /*e.target.appendChild为获取元素的内部添加拖拽图片的节点代码*/ } </script> </body> </html>
效果图: