使用HTML5中的JavaScript實現拖放圖像數組？

Question

我想創建一個可以拖放到容器中的圖像列表。 然后我想迭代圖像列表並渲染它們。 以下代碼僅適用於陣列外的圖像（ boxA ）。 如何實現此設計，以使陣列內的圖像可以在容器內拖放（ boxB ）？

<!DOCTYPE HTML>
    <html>
    <head>
<style type="text/css">
html, body {
    margin-left:auto;
    margin-right:auto;
    width:980px;    
}

#boxA { background-color: #6633FF; width:75px; height:75px;  }
#boxB{
    float:right;
    padding:10px;
    margin:10px;
}
#boxB { background-color: #FF6699; width:500px; height:500px; }
#lolo {
    padding:10px;
    width:800px;
    list-style:none;
    float:left;
}

#lolo ul{
    display:inline; 
}
#lolo ul li{
    display:inline; 
}
</style>
    <script type="text/javascript">
    function dragStart(ev) {
       ev.dataTransfer.effectAllowed='move';
       ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
       ev.dataTransfer.setDragImage(ev.target,0,0);
       return true;
    }
    function dragEnter(ev) {
       event.preventDefault();
       return true;
    }
    function dragOver(ev) {
        return false;
    }
    function dragDrop(ev) {
       var src = ev.dataTransfer.getData("Text");
       ev.target.appendChild(document.getElementById(src));
       ev.stopPropagation();
       return false;
    }
    <-- this my array -->
    var myArray = new Array;
    myArray[0] = '<img src="image/pic1.png">'
    myArray[1] = '<img src="image/pic2.png">'
    myArray = ev.dataTransfer.getData("text");
    function lala(){
    for (var i=0; i < myArray.length; i++)
    {
         document.write("<ul>" + "<li>" + myArray[i] + "</li>" + "</ul>");

    }
    }</script>
    </head>

    <body>
    <!-- this the HTML code -->
    <div id="boxA" draggable="true" 
       ondragstart="return dragStart(event)">
    </div>
        <div id="lolo">
    <script>
      lala();
     </script>
     </div>
    <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" 
         ondragover="return dragOver(event)">
     </div>
    </body>
    </html>

Answer 1

給'id'到圖像並使用ondragstart處理程序為div'lolo'

myArray[0] = '<img id="img1" src=........

myArray[1] = '<img id="img2" src=........

.....

<div id="lolo" ondragstart="return dragStart(event)"> ...... </div> `

使用HTML5中的JavaScript實現拖放圖像數組？

問題描述

1 個解決方案

解決方案1
0 2012-05-24 14:48:38

使用HTML5中的JavaScript實現拖放圖像數組？

問題描述

1 個解決方案

解決方案1 0 2012-05-24 14:48:38

解決方案1
0 2012-05-24 14:48:38