JavaScript拖放div樣式

Question

因此，我嘗試制作一個“簡單”的php + javascript拖放文件，這是我的代碼：

    <title>Web Editor</title>
    <?php
    mysql_connect("$host","$user","$pass");
    mysql_select_db("$db");
    if(isset($_POST['submit'])){
    $name=$_FILES['file']['name'];
    $temp=$_FILES['file']['tmp_name'];
    move_uploaded_file($temp,"uploaded/".$name);
    $url="http://www.bluejayke.com/edit/uploaded/$name";
    }
    ?>
    <?php
    if(isset($_POST['submit'])){
    mysql_query("INSERT INTO uploadedvideos(id,name,url) VALUES('','$name','$url')");
    echo "</br>" . $name . " uploaded";
    }
    $query="SELECT * FROM uploadedvideos";
    $result = mysql_query($query);
    ?>
    <div class='wrapper' id='wrapper'>
    <table cellpadding="0" cellspacing="0" border="1">
    <tr>
         <td style="width:400px; height:50px;"><form action="index.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" name="submit" value="Upload">
    </form></td>
    </tr>
    <tr>
         <td style="width:400px; height:500px;">
             <div style="width:100%; height:100%; overflow:auto; ">
             <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1");
    </script>


    <?php
    while($row=mysql_fetch_array($result))
    {
    $id=$row['id'];
    $name=$row['name'];
    $url=$row['url'];
    echo "<div style='position:absolute;cursor:pointer;' id='".$id."'><a href='javascript: click(\"$url\")'>$name</br><embed id='$id' src='$url' width='120' height='120' draggable='true' ondragstart='drag(event)'></embed></a><input type='button' id='delete' value='X' onclick='return Deleteqry($id)' /></div><br> ";
    ?>
    <script type="text/javascript">
        var dragging = false

        $(function () {

            var target<?php echo $id ?> = $('#<?php echo $id; ?>')

            target<?php echo $id ?>.mousedown(function() { dragging<?php echo $id; ?> = true })
            $(document).mouseup(function() { dragging<?php echo $id; ?> = false })
            $(document).mousemove(function(e) { 
                if(dragging<?php echo $id; ?>){ 
                    target<?php echo $id ?>.css('left', e.pageX) 
                    target<?php echo $id ?>.css('top', e.pageY) 
                }
            })  
        })

    </script>
    <?php
    }
    ?>
     </div>
    </table>
    </div>
    <div class='wactch' id='watching' height='480' width='720'>Loading..</div>

    <script>
    /*document.onmousemove=mouseMove;
    function mouseMove(ev)
    {
    ev = ev || window.event;
    var mousePos=mouseCords(ev);
    }
    function mouseCords(ev)
    {
        if(ev.pageX || ev.pageY)
        {
        return{x:ev.pageX,y:ev.pageY);
        }
        return
        {
        x:ev.clientX+document.body.scrollLeft-document.body.clientLeft, y:ev.clientY.document.body.scrollTop-document.body.clientTop
        };
    }
    }*/

    function Deleteqry(id)
    { 
      if(confirm("Are you sure you want to delete this picture?")==true)
               window.location="index.php?del="+id;
        return false;
    }
    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    window.onload=function()
    {
    click("http://www.bluejayke.com/edit/uploaded/dpnewslogo.png");
    }
    function click(url)
    {
    document.getElementById("watching").innerHTML='<embed src="'+url+'" width=720 height=480></embed>';
    }
    </script>

    <?php
    if($_GET['del']){
    $delete_id=$_GET['del'];
    mysql_query("DELETE FROM `uploadedvideos` WHERE `uploadedvideos`.`id` = $delete_id");
    header("location: index.php");

    }

    ?>
    <style type="text/css">
    .wrapper
    {
        width:500px;
            overflow: hidden;
    float: left;
    }
    #watching {
    float: right;
    }
    .div1 {width:750px;height:120px;padding:10px;border:1px solid #aaaaaa; oveflow: hidden;}
    </style>

重要的部分在while循環中。 這段代碼的結果是，當我希望它們以垂直線狀結構排列時，我在while循環中創建的所有div都相互堆疊。 有人對此有見識嗎？ 我認為這與div的樣式有關，但我不確定如何解決該問題，同時仍保留拖放功能。

Answer 1

您的div位置絕對。 您只需要將它們更改為position:relative;

http://www.w3schools.com/css/css_positioning.asp