Я пытаюсь сделать контейнер принимать 2 разных перетаскиваемых элемента. Я хочу, чтобы в контейнере требовалось добавлять и принимать оба элемента, а затем запускать событие после
$(document).ready(function () {
var dfd1 = $.Deferred();
var dfd2 = $.Deferred();
$('#draggable').draggable({
start: function () {
$(this).parent().animate({
opacity: '0.5'
}, 1000);
},
stop: function () {
$(this).parent().animate({
opacity: '1'
}, 1000).end().remove();
}
});
$('#droppable').droppable({
accept: ("#draggable", "#draggable2"),
drop: function (event, ui) {
$(this).html('Dropped');
dfd1.resolve();
dfd2.resolve();
}
});
// this will trigger when both dfds have been resolved
$.when(dfd1.promise(), dfd2.promise()).then(function () {
alert("done!")
});
});
Несколько вопросов. Во-первых, вы вызываете draggable
на #draggable
и никогда не на #draggable2
. Тогда ваш accept
был неправильным, он должен accept: "#draggable, #draggable2"
. Наконец, вы решали обе отсрочки при любом падении. Вам нужно только разрешить соответствующие отложенные.
$(document).ready(function () {
var dfd1 = $.Deferred();
var dfd2 = $.Deferred();
$('#draggable, #draggable2').draggable({
start: function () {
$(this).parent().animate({
opacity: '0.5'
}, 1000);
},
stop: function () {
$(this).parent().animate({
opacity: '1'
}, 1000).end().remove();
}
});
$('#droppable').droppable({
accept: "#draggable, #draggable2",
drop: function (event, ui) {
$(this).html('Dropped');
if(ui.draggable.is("#draggable")){
dfd1.resolve();
} else {
dfd2.resolve();
}
}
});
// this will trigger when both dfds have been resolved
$.when(dfd1.promise(), dfd2.promise()).then(function () {
alert("done!")
});
});