CODEWITHSUNDEEP
javascriptjquerycss
Octavius
Octavius

Reputation: 583

How do I separately append a draggable element to multiple droppable divs

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.

Upvotes: 0

Views: 113

Answers (2)

bipen
bipen

Reputation: 36531

use this....here is the fiddle

http://jsfiddle.net/Kxtvg/83/

changed

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

to

$(this).append(ui.draggable.html() + '<br/>');

You are appending the html to all mentioned elements $('#sortcard, #dropbox,#dropbox1'). Using $(this) will drop the content to that selected eleements only

Upvotes: 0

koostudios
koostudios

Reputation: 171

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.

Upvotes: 2

Related Questions