4

I want to create a list of images that can be dragged and dropped into a container. Then I want to iterate the list of images and render them. The code below works only for images that are outside of the array(boxA). How do I implement this design as to have the images that are inside the array to be drag-and-drop-able inside the container (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>
4

1 回答 1

0

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

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

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

.....

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

于 2012-05-24T14:48:38.777 回答