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 사용'롤로 '

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를 사용하여 이미지 배열로 드래그 앤 드롭을 구현 하시겠습니까?

답변

관련 문제