如何将可拖动元素单独附加到多个可放置的div

Question

我的draggable元素有一个小问题，它附加到多个droppable div。 我想制作代码，以便我可以附加到任何droppable div而不会影响任何其他可丢弃的div。 我认为我所要做的只是包括我希望可以放弃div的盒子的ID，这样就行了。

$('#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);
    }
    });

但是，正如在这里看到的那样，问题是只有一个盒子被触摸时所有的div都会受到影响。 我很想知道如何解决这个问题以及不再犯这个错误的知识以及任何其他技巧。

Answer 1

你的问题就在这里：

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

这意味着将它附加到所有这些元素。 也许您应该使用$(this)或$(e.target)作为选择器。 这意味着它只会附加到被删除的元素上。

Answer 2

用这个....这里是小提琴

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

变

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

至

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

你将html附加到所有提到的元素$（'＃sortcard，＃dropbox，＃dropbox1'）。 使用$（this）将仅将内容删除到所选元素