Question

I have a little problem with my draggable element in concern to it appending to multiple droppable div’s. I want to make the code so that I can append to any droppable div without any other droppable div being affected. I figured that all I had to do was include the id’s of the boxes I wanted to be droppable div’s and that would work.

$('#sortcard, #dropbox, #dropbox1').droppable({accept:'.sorting', hoverClass:'border', tolerance: 'touch',
    drop: function (e, ui){
    $('#sortcard, #dropbox,#dropbox1').append(ui.draggable.html() + '<br/>');
    $("#add_friend").show().fadeOut(12000);
    }
    });

But as seen HERE the problem is that all the div’s are affected when only one box has been touched. I would love and be grateful to know how to fix this and the knowledge to not make this mistake again as well as any other tips.

Answer 1

Your problem is this line here:

$('#sortcard, #dropbox,#dropbox1').append(ui.draggable.html() + '<br/>');

This means to append it to all these elements. Perhaps you should use $(this) or $(e.target) for the selector instead. That means that it will only append to the element being dropped on.