javascript - drag and drop not working, dont allow drop on a div -

im trying create aplication using drag , drop. when im trying drop element on div called 'serviciosarealizar', doesnt allow. please

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> 

you might looking this;

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(); }  

even though functions aren't same name, should still work fine. make sure on images(this works images) add draggable="true" onstartdrag="drop(ev)". make sure images had ids, ids.