0

I need to dynamically create two DIVs and an item to drag/drop between the two. If I code static HTML this works fine but dynamically I am missing something. Has someone been able to define drag events dynamically and have them work?

<html>
<head>
<script>
    function main() {

        //SOURCE    
        var source = document.createElement("DIV");
        source.id="source";
        source.innerHTML='<h1 class=title>SOURCE</h1>';
        document.body.appendChild(source);

        //ITEM      
        var item=document.createElement("DIV");
        item.id="item";
        item.draggable="true";
        item.ondragstart="function(){ alert('drag'); }";
        item.innerHTML='DRAG ME';
        source.appendChild(item);

        //TARGET
        var target = document.createElement("DIV");
        target.id="target";
        target.innerHTML="<h1 class=title>TARGET</h1>";
        target.ondragover="function(){ alert('DragOver'); }";
        target.ondrop="function(){ alert('Drop'); }";
        document.body.appendChild(target);

    }
</script>
<style>div   {border-style: solid;border-width: 3px;padding: 10px;margin: 10px;width:80%;}</style>
</head>
<body  onload=main()>
</body>
</html>
3
Contributors
3
Replies
14
Views
1 Year
Discussion Span
Last Post by AleMonteiro
0

Try removing the quotes from the events. For example:

target.ondragover="function(){ alert('DragOver'); }";

would become

target.ondragover=function(){ alert('DragOver'); };

0

Argh, so simple but I could not see it - thank you. The only problem now is the target does not allow drop... I'm searching but if you have an idea I would appreciate it! I cannot get the drop function to fire...

        target.ondrop=function(){ alert('Drop'); };
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.