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 = this.id + 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
[email protected]
http://jquery.com/discuss/
