在 HTML5 中使用 JavaScript 实现图像数组的拖放？答案

【问题标题】：Implementing drag and drop with image array using JavaScript in HTML5?在 HTML5 中使用 JavaScript 实现图像数组的拖放？
【发布时间】：2012-05-19 06:07:16
【问题描述】：

我想创建一个可以拖放到容器中的图像列表。然后我想迭代图像列表并渲染它们。下面的代码仅适用于数组之外的图像 (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>

【问题讨论】：

你看过这个吗？可能会有所帮助...jqueryui.com/demos/sortable/#connect-lists

标签： javascript html drag-and-drop

【解决方案1】：

为图像提供 'id' 并为 div 'lolo' 使用 ondragstart 处理程序

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

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

.....

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

【讨论】：