ansaurus

Question

Draggable has been droppped and cloned, but the clone isn't draggable

Answer 1

A:

Hey, I found out that the Draggable needed the following call (within the STOP function): $(ui.helper).clone(true).removeClass('ui-draggable ui-draggable-dragging').appendTo('ul#jQiBoard');

Neurofluxation 2010-09-06 10:34:39

Answer 2

+1 A:

Well, you should really be attaching that event handler to the droppable object, instead of the draggable. I made that change, and various other changes to this jsfiddle I've set up. Go have a look: http://jsfiddle.net/VQfhW/

Yi Jiang 2010-09-06 10:36:05

Answer 3

+1 A:

I change your code to this:

$(document).ready(function() {
    var i = 0;
    var a = 250;
    var b = 19;

    //append board
    $('body').append('<ul id="jQiBoard"></ul>');
    while (i < b*b) {
        $('ul#jQiBoard').append('<li class="jQiNode"></li>');
        i++;
    }

    //init mouseover
    $('li.jQiNode').stop().mouseover(function() {
        $(this).animate({
            opacity: 0.65
        }, a);
    });
    $('li.jQiNode').stop().mouseout(function() {
        $(this).animate({
            opacity: 1.00
        }, a);
    });

    //append stones
    $('body').append('<ul id="jQiStones"></ul>');
    $('ul#jQiStones').append('<li class="jQiWhite"></li>');
    $('ul#jQiStones').append('<li class="jQiBlack"></li>');

    $('li.jQiWhite').draggable({
        snap: 'li.jQiNode',
        helper: 'clone',
        zIndex: 100,
        stop: function(event, ui) {

        }
    });
    $('li.jQiBlack').draggable({
        snap: 'li.jQiNode',
        helper: 'clone',
        zIndex: 100,
        stop: function(event, ui) {
            alert(ui.draggable);
        }
    });
    $('li.jQiNode').droppable({
        accept: '.jQiWhite, .jQiBlack'
    });
});

The diffrences is in the json of the droppable. I change de accept value. Befor you were accepting jQiNode wich was the droppable elements. In the accept you must make a selector of the draggable elements wich can be dropped there, not of the droppable elements.

Good Luck, here you can try it working: http://jsfiddle.net/VQfhW/

Diego 2010-09-06 12:00:38

ansaurus

tags:

views:

answers:

Draggable has been droppped and cloned, but the clone isn't draggable

related questions