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

我想創建一個可以拖放到容器中的圖像列表。然後我想迭代圖像列表並渲染它們。下面的代碼僅適用於陣列外部的圖像（boxA）。我該如何實現這種設計，讓陣列內的圖像在容器內部可拖放 - （boxB）？在HTML5中使用JavaScript實現拖放圖像數組？

<!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>

來源

2012-05-19 user1404706

你看過這個嗎？可能會有所幫助... http：//jqueryui.com/demos/sortable/#connect-lists – Greg

給「身份證的圖像和使用ondragstart處理程序DIV '露露'

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

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

.....

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

來源

2012-05-24 14:48:38 prashanth

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

回答

相關問題