I'm currently utilizing Jquery-Ui for Jquery draggable on one of my websites. Here is the fiddle link: fiddle. I have the ability to add multiple widgets to the screen, which works well. However, when I close one and attempt to drag another widget, its position shifts to the top of the document. How can I prevent this from happening?
Below is my script:
var widgetId = 0;
$("#btnAddWidget").click(function () {
$("#container").append('<div class="Widget" id="widget' + widgetId + '"><input type="button" class="close" id="btnclose' + widgetId + '" value="Close" /><input type="button" class="addgraph" id="btnAddGraph' + widgetId + '" value="Add Graph" /></div>');
widgetId++;
$(".Widget").draggable({
containment: '#container',
cursor: 'move',
start: function (event, ui) {
var Startpos = $(this).position();
if (Startpos.top < 0) {
debugger;
$(this).css("top", 0);
}
},
stop: function (event, ui) {
var Stoppos = $(this).position();
if (Stoppos.top < 0) {
debugger;
$(this).css("top", 0);
}
}
});
$(".Widget").resizable({ containment: 'parent', });
});
function setPositionToRelative(element)
{
}
$(document).on('click', '.close', function (e) {
e.preventDefault();
$('.Widget').each(function () {
var top = $(this).position().top + 'px';
var left = $(this).position().left + 'px';
$(this).css({ top: top, left: left });
}).css({ position: 'absolute' });
$(this).parent().remove();
});