Question

I am using the basic Drag and Drop example of Sencha and modifying it. I need to have a button that is able to create a new div and make it draggable. I have been able to do the first thing, but then I can’t make it draggable.

I know if I do the following I make the div draggable:

new Ext.util.Draggable('my-div-id', {  });

but when I click the button for a second time, it does’t work anymore. It seems that I can only create one draggable div with the same id.

How can I solve this?

Answer 1

This is what I did:

var count = 0;

Inside my function to create a div:

var divTag = document.createElement("div");
divTag.id = "somename" + count;

//Style the new div
divTag.setAttribute("align","center");
divTag.style.border = "1px solid rgba(0,0,0,.3)";
divTag.style.width = "100px";
divTag.style.height = "60px";
divTag.style.background = "#5283D1";
divTag.style.top = "170px";
divTag.style.left =  "5px";
divTag.style.position = "absolute";
divTag.style.color = "rgba(0,0,0,.5)";
divTag.style.borderRadius = "6px";

divTag.className ="x-draggable";

//added some text inside the div
divTag.innerHTML = count + " new";

document.body.appendChild(divTag);

new Ext.util.Draggable('somename'+count, { 
});

count += 1;

So with the variable count I create a new id for every div I generate, thus making them all draggable.