Требовать точку отбрасывания для перетаскивания 2 элементов, а затем вызвать событие

Question

Требовать точку отбрасывания для перетаскивания 2 элементов, а затем вызвать событие

0

Я пытаюсь сделать контейнер принимать 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!")
     });
 });

benji311 22 сен. 2013, в 02:56

Источник

Теги:

jquery

html

css

1 ответ

Ещё вопросы

James Montagne · Answer 1 · 2013-09-22T19-28-00.000Z

Несколько вопросов. Во-первых, вы вызываете draggable на #draggable и никогда не на #draggable2. Тогда ваш accept был неправильным, он должен accept: "#draggable, #draggable2". Наконец, вы решали обе отсрочки при любом падении. Вам нужно только разрешить соответствующие отложенные.

http://jsfiddle.net/H9CQt/

 $(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!")
     });
 });