There are a couple of questions that seem to ask this question, but no one accepted answers and nothing has worked for me.

I have a 'group' button that when it's clicked, will dynamically create a 'group' div (I then append some pre-selected 'child' divs within it)
However I need the new 'group' div to be draggable.
I can set the draggable attribute dynamically, no problem. But being draggable is not much good without the ondragstart() event, and no matter what I've tried, I can't get this assigned.
I am using jQuery which may have a bearing.

The latest iteration of my code is (this appears in an init() function that is called from body.onload):

var group=$(document.createElement('div'));
group.attr({id: 'group'+grpcount});
group.attr({draggable: "true"});
group.addClass('group');
group.html("<span class='group'>Group"+grpcount+"</span>");
$('#boundary').append(group);   
document.getElementById('group'+grpcount).addEventListener("startdrag",drag);

But I have also tried various binations of jQuery .bind:

group.bind("dragstart", drag(ev));
group.bind("dragstart", function(ev){drag(ev);});

All to no avail.

I have a drag function already defined (and I've tried putting it before and after the code above):

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id+":"+ev.pageX+":"+ev.pageY);
}

I hope there is something glaringly obvious that I just can't see.
Can somebody solve this?

There are a couple of questions that seem to ask this question, but no one accepted answers and nothing has worked for me.

I have a 'group' button that when it's clicked, will dynamically create a 'group' div (I then append some pre-selected 'child' divs within it)
However I need the new 'group' div to be draggable.
I can set the draggable attribute dynamically, no problem. But being draggable is not much good without the ondragstart() event, and no matter what I've tried, I can't get this assigned.
I am using jQuery which may have a bearing.

The latest iteration of my code is (this appears in an init() function that is called from body.onload):

var group=$(document.createElement('div'));
group.attr({id: 'group'+grpcount});
group.attr({draggable: "true"});
group.addClass('group');
group.html("<span class='group'>Group"+grpcount+"</span>");
$('#boundary').append(group);   
document.getElementById('group'+grpcount).addEventListener("startdrag",drag);

But I have also tried various binations of jQuery .bind:

group.bind("dragstart", drag(ev));
group.bind("dragstart", function(ev){drag(ev);});

All to no avail.

I have a drag function already defined (and I've tried putting it before and after the code above):

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id+":"+ev.pageX+":"+ev.pageY);
}

I hope there is something glaringly obvious that I just can't see.
Can somebody solve this?

• javascript
• jquery
• dom
• jquery-events

• 1 group.bind("dragstart", function(ev){drag(ev);}); should work fine. As should group.bind("dragstart", drag);. See: jsfiddle/K4hgw. – Felix Kling Commented Aug 6, 2013 at 21:29
• Can you provide a jsfiddle example ? – Hackerman Commented Aug 6, 2013 at 21:33

2 Answers 2

You'll be better to take a look at Jquery UI draggable here

and if you dont know yet, you can call multiple jquery finctions in a chain, so your code looks more readable like below:

var group=$('div').attr('id', 'group'+grpcount)
                  .addClass('group')
                  .html("<span class='group'>Group"+grpcount+"</span>");

$('#boundary').append(group);   

and instead of

document.getElementById('group'+grpcount).addEventListener("startdrag",drag);

use this

group.draggable({
    start:function(event, ui){
         //this is where dragging starts when you push mousedown and move mouse
    },
    drag:function(event, ui){
         //this function will be called after drag started each time you move your mouse
    }
    stop:function(event, ui){
         //this is where you release mouse button
    }
})

this jquery draggable widget with droppable widget will ease your life if you really want to implement plex drag-and-drop functionality

I made this:

function drag(ev) {  alert('Hi');  }

var grpcount = 21;
var group=$(document.createElement('div'));
group.attr({id: 'group'+grpcount});
group.attr({draggable: "true"});
group.addClass('group');
group.html("<span class='group'>Group"+grpcount+"</span>");
group.bind("dragstart", function(ev){drag(ev);});
$('#boundary').append(group);  

See the working fiddle here: http://jsfiddle/nxcSz/