CODEWITHSUNDEEP
javascriptjqueryhtml
Tom
Tom

Reputation: 27

Jquery causes error and css to stick

Im using this code (jsfiddle) - JSFIDDLE

When an item is dragged to a correct box , it disables the original one from being dragged again. The problem is that it causes the css to stick so that the green of boxes that accept the dragged item dosent go away .

It also produces this error in the console :

Uncaught Error: cannot call methods on draggable prior to initialization; attempted to call method 'disable'.

Any help would be good.

Also how can i change the colour of the disabled box to grey .

JS :

    $(".DragItem").draggable({
    revert: 'invalid',
    helper: "clone"
});

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());

    }
});

$(".drop2").droppable({
    accept: '#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop3").droppable({
    accept: '#3,#4',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop4").droppable({
    accept: '.DragItem',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());
    }
});

Upvotes: 0

Views: 55

Answers (2)

Travis P
Travis P

Reputation: 178

JSFiddle

You can initialize the draggable with $(ev.target).draggable();

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

I believe this is what you are looking for http://jsfiddle.net/vm9DS/48/

First of all I removed the ids from the draggable objects because when you are cloning them you end up with a lot of elements with the same id, and that is not allowed.

As for the rest of the code:

Just remove this line in the code

$(ev.target).draggable( 'disable' );

It is not working because ev.target is the droppable object not draggable and it is causing the error :)

And for the grey just add this to the css, so whenever you drop a dragItem in the dropItem it will change the background to grey :)

.DropItem .DragItem{
    background-color: grey;
}

Upvotes: 0

Related Questions