Ok, it seems that the clone() function messes it up. I now use the
following code and it works:
function makeDraggable(expr) {
/**
* Makes the selection (by expr) draggable
*/
$(expr).draggable(
{
start: function() {
// only clone if clone is not yet present
if ( $(".draggedClone").length == 0 ) {
if ($(this).next().is("#addons .draggable")) {
$("<div>").attr("id", $
(this).attr("id")).addClass("draggable").addClass("draggedClone").insertAfter($
(this));
}
else {
$("<div>").attr("id", $
(this).attr("id")).addClass("draggable").addClass("draggedClone").appendTo($
(this).parent());
}
$(this).attr("id", $(this).attr("id") + '_' + ($
(".draggable").length + 1) );
$(this).addClass("dragged");
}
},
stop : function(){
// $("#droparea").append("num of draggedClones: " + $
(".draggedClone").length + "<br/>");
$(".draggedClone").append($("<img>").attr("src", $(".dragged >
img").attr("src")));
$(".draggedClone").removeClass("draggedClone");
$(this).removeClass("dragged");
makeDraggable(".draggable");
}
}
);
}
Also, I am sorry for the double(triple)-posting but it took ages for
my question to show up on this list and sometimes it posts one
question twice...
Balint
On Oct 24, 2:20 pm, erdibalint <[EMAIL PROTECTED]> wrote:
> Hi there,
>
> I've tried to achieve a simple thing with draggables. Put little
> pictures (wrapped in divs) on top of a bigger one using the drag-and-
> drop technique. This is what I've come up with:
>
> function makeDraggable(expr) {
> /**
> * Makes the selection (by expr) draggable
> */
> $(expr).draggable(
> {
> start: function() {
> // only clone if clone is not yet present
> if ( $(".draggedClone").length == 0 ) {
> if ($(this).next().is("#addons .draggable")) {
> $(this).next().before($(this).clone().css("position",
> "static").addClass("draggable").addClass("draggedClone"));
> }
> else {
> $(this).clone().css("position",
> "static").addClass("draggable").addClass("draggedClone").appendTo($
> (this).parent());
> }
> $(this).attr("id", $(this).attr("id") + '_' + ($
> (".draggable").length + 1) );
> $(this).addClass("dragged");
> }
> makeDraggable(".draggable");
> },
> stop : function(){
> // $(".draggedClone").removeClass("draggedClone");
> // FIXME: remove dragged element if not dropped in the drop
> area
> }
> }
> );
>
> }
>
> $(document).ready(function(){
> (...)
> makeDraggable("#addons .draggable");
> $("button[name='rebind']").click(function() {
> $("#addons .draggable").toggleClass("highlighted");
> makeDraggable("#addons .draggable");
> });
>
> });
>
> What happens is that the initial draggable divs work fine. They can be
> dragged and dropped onto the big image. But the created clones do not
> respond to dragging (i.e they are not draggable). I think they should
> because of the makeDraggable(".draggable") line in the start function
> of the draggable.
>
> I've created the 'rebind' button to explicitly assign dragability to
> the clones but it did not help. (I've only added the
> toggleClass("highlighted") to see if the selection formula is correct,
> it is.
>
> Has anyone had the same problem or is this a bug? (I've tried in
> several browsers none of them worked). Or am I being silly?
>
> Thank you for your help in advance,
> Balint
