jquery - 需要放置点拖放2个元素，然后触发事件

Question

我试图让一个容器接受 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!")
     });
 });

Answer 1

几个问题。首先，您只是在调用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!")
     });
 });