CODEWITHSUNDEEP
jqueryjquery-ui
SB2055
SB2055

Reputation: 12892

Jquery's draggable/droppable - making a dropped element fade out instead of just disappearing?

I have a list of objects that are draggable/droppable into folders. Right now when I drop them into a folder they just disappear. Here's a fiddle of a hackish solution:

http://jsfiddle.net/tYfNb/1/

Is there any better way to accomplish this?

Code: 

$( '.droppable' ).droppable( {
    drop: function( event, ui ) {
        if(ui.draggable.parent('.sortable').length){
        ui.draggable
            .clone()
            .appendTo('.droppable')
            .addClass("sort-drop")
            .css(ui.position)
            .hide( 500 );

        ui.draggable.hide();
                console.log(ui,event);
    }else{
        ui.draggable.hide(500);
    }


    }
} );

$( '.sortable' ).sortable();

$( '.draggable .item' ).draggable( {
    revert: 'invalid'
} );

Upvotes: 1

Views: 2088

Answers (1)

Karthi Keyan
Karthi Keyan

Reputation: 4393

I have updated your JSFiddle with some animation changes made. 

$( '.droppable' ).droppable( {
    drop: function( event, ui ) {
        if(ui.draggable.parent('.sortable').length){
        ui.draggable
            .clone()
            .appendTo('.droppable')
            .addClass("sort-drop")
            .css(ui.position)
            .fadeOut( 5000 );

        ui.draggable.hide();
                console.log(ui,event);
    }else{
        ui.draggable.fadeOut(5000);
    }

    }
} );

i hope this animation changes will help you maore.

Upvotes: 1

Related Questions