[jQuery] Create new div at final position of draggable
What I am trying to do is this. I have an unordered list. I go through the list and make each list item draggable in $(document).ready. Then via the onStop of the draggable I want to create a new div and have the dragged list item snap back to its original position. The new div should be positioned where the drag ended. I got this to work fine when I explicitly assigned a list item to .draggable. The new div is created where the drag ended. This is the code for that.
$('#word').Draggable(
{
ghosting: true,
revert: true,
opacity: 0.5,
fx: 300,
onStop: function(){
offsets = $('#word').offset({scroll: false});
x = offsets.left;
y = offsets.top;
var nDiv =
document.createElement("DIV");
nDiv.id = 'word1';
nDiv.style.position = "absolute";
nDiv.style.left = x;
nDiv.style.top = y;
nDiv.innerHTML = 'Word'
$("body").append(nDiv);
$(nDiv).Draggable();
}
});
When I parse through all of the list items in the div and assign .draggable with .each the new div always is created on top of the original list item. Here is the code for that.
var i = 0;
$("#words li").each(function() {
$(this).Draggable({ghosting: true,
revert: true,
onStop: function(){
offsets = $(this).offset({scroll: false});
x = offsets.left;
y = offsets.top;
var nDiv =
document.createElement("DIV");
nDiv.id = <a href="http://this.id">this.id</a> + i;
nDiv.style.position = "absolute";
nDiv.style.left = x;
nDiv.style.top = y;
nDiv.innerHTML = $(this).text();
$("body").append(nDiv);
$(nDiv).Draggable();
i++; }
});
});
Can anyone see what I am doing wrong ? Any ideas are greatly appreciated.
Thanks
Cal
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/