<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTf-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navabr navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class="col-md-3"></div> <div class="col-md-6 well"> <h3 class="text-primary">JavaScript - Autofill Inputs By Dragging</h3> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-3"></div> <div class="col-md-6"> <center><img src="image/trash.png" height="200" width="200" ondrop="drop(event)" ondragover="dragOver(event)"></center> </div> <br style="clear:both;"/><br /> <div class="col-md-2"></div> <div class="col-md-8" style="border:1px SOLID #ccc; padding:10px;"> <?php foreach ($files as $file){ if($file != '.' && $file !='..'){ $path = "files/".$file; echo "<div id='".$file."' draggable='true' ondragstart='drag(event)' style='float:left; margin:12px;'><img src='image/image.png' height='30' width='30'/><label>".$file."</label></div>"; } } ?> </div> </div> <script src="js/script.js"></script> </body> </html>
<?php } } ?>
function dragOver(e){ e.preventDefault(); } function drop(e){ e.preventDefault(); var data = e.dataTransfer.getData("data"); window.location = "remove.php?file="+data; } function drag(e){ e.dataTransfer.setData("data", e.target.id); }