끌어서 놓기가 작동하지 않으며 div에 놓을 수 없습니다.

Question

끌어서 놓기를 사용하여 응용 프로그램을 만들려고합니다. 'serviciosARealizar'라는 div에 요소를 놓으려고 할 때 허용되지 않습니다. 귀하의 문제는 당신의 이미지 만있는 div ID를 필요가 없다는 것입니다 HTML

<div id='aceite' draggable="true" ondragstart="arrastrar(event)"><img src='img/aceite.jpg' /></div> 
    <div id='luces' draggable="true" ondragstart="arrastrar(event)"><img src='img/lamp.png' /></div> 
    <div id='serviciosARealizar' ondrop='soltar(event)' ondragover='permiteSoltar(event)'></div> 

JAVASCRIPT

<script> 

    function permiteSoltar(ev){ 
     ev.preventDefault(); 
    } 

    function soltar(ev){ 
     ev.preventDefault(); 
     var data=ev.dataTransfer.getData("Text"); 
     ev.target.appendChild(document.getElementById(data)); 
    } 
    function arrastrar(ev){ 
     ev.dataTransfer.setData("Text",ev.target.id); 
    } 

    </script> 

Answer 1

도와주세요. 드래그 할 때 div를 드래그하지 않으면 이미지를 드래그합니다. div에서 id를 가져 와서 img에 넣으면 완벽하게 작동합니다. 다음 태그를 사용하여 시도했습니다. (또한 당신이 파일이 servicosARealizar의 DIV에 치수를 가지고 CSS 가정, 그렇지 않으면 당신은 크기를 지정해야합니다)

<div draggable="true" ondragstart="arrastrar(event)"><img id='aceite' src='img/aceite.jpg' /></div> 
    <div draggable="true" ondragstart="arrastrar(event)"><img id='luces' src='img/lamp.png' /></div> 
    <div id='serviciosARealizar' ondrop='soltar(event)' style="width:500px;height:500px;background-color:red" ondragover='permiteSoltar(event)'></div> 

Answer 2

당신이 찾고있을 수도

;

function dragStart(ev) { 
    draggSrcID = ev.target.id; 
    dragSrcEl = ev.target; 
    ev.dataTransfer.effectAllowed = 'move'; 
    ev.dataTransfer.setData('text/html', ev.target.outerHTML); 
} 

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drop(ev) { 
    ev.target.appendChild(document.getElementById(draggSrcID)); 
    ev.preventDefault(); 
} 

기능이 동일한 이름이 아니더라도 작동해야합니다. 그냥 이미지 (이것은 이미지에만 해당)에 있는지 확인하십시오. draggable="true" onstartdrag="drop(ev)"을 추가하십시오. 또한 이미지에 ID, 모든 ID가 있는지 확인하십시오.