Ok I\'ve been playing around with this for hours now and still no dice. I\'m creating an interface allowing you to drag and drop an icon(a div with an image inside). I\'m us
Final edit. Here is the functionality you want. I had to modify your code a lot but this does what you want it to do. You need to pass the mousedown event you are firing into a trigger on the added div. Here is the new jsfiddle
This should be your html
Lorem ipsum dolor sit amet...
Here is your javascript
$(".demo").mousedown(function (e){
var isIE = document.all ? true : false;
var _x,_y;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = e.clientX + document.body.scrollLeft;
_y = e.clientY + document.body.scrollTop;
}
var boundry = $('#page_wrap').offset();
$('', {
id: 'tester',
}).addClass('test_drag')
.html("New div to drag")
.css("top", _y + "px")
.css("left", _x + "px")
.draggable()
.appendTo('#page_wrap');
$("#tester").trigger(e); //this is the important line, that triggers the drag
});
And your CSS
#inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
.test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }