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.
Comments
Post a Comment