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

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

1 个答案: