4

コンテナにドラッグアンドドロップできる画像のリストを作成したいと思います。次に、画像のリストを繰り返してレンダリングします。以下のコードは、array（）の外部にある画像に対してのみ機能します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>
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 に答える