1 Reply Latest reply on May 14, 2013 11:24 AM by adobescrname

    How can I set droppable to accept multiple draggable items?

    adobescrname

      Hi,

       

      I have five draggable items and a single droppable item (zena_sym) on the stage. I'd like zena_sym to accept three of those five draggable items and run a function when it does.  The problem I'm having is that I can only set it to accept one item at a time. Here is the code I'm using:

       

      //load jquery

      yepnope({nope:['jquery-ui-1.10.3.custom.min.js'], complete:init});

       

      //set counter

      sym.setParameter("counter", 0);

       

      //create semafor variable

      var semafor = sym.composition.getStage().getParameter("counter");

       

      //define init

      function init(){

       

      //define draggable items

      sym.$("majica_sym").draggable();

      sym.$("suknja_sym").draggable();

      sym.$("haljina_sym").draggable();

      sym.$("sesir_sym").draggable();

      sym.$("hlace_1_sym").draggable();

       

      //define zena_sym as droppable and also items it accepts

      sym.$("zena_sym").droppable(

      {accept: (sym.$("majica_sym") , sym.$("suknja_sym") , sym.$("sesir_sym"))},

       

      //define event and function

      {drop: function() {

      semafor = semafor + 1;

      sym.$("brpredmeta_txt").html(semafor);}

      }

       

      )

      }

       

      Thank you for your help.

        • 1. Re: How can I set droppable to accept multiple draggable items?
          adobescrname Level 1

          Found it!

           

          So if you want to have a simple drag and drop application/game where you want to count only the right items (so some get accepted by droppable and some don't), you need to use the scope option (not accept). The scope option has to be the same for droppable and draggables it accepts. Here is the code that worked:

           

          //load jquery

          yepnope({nope:['jquery-ui-1.10.3.custom.min.js'], complete:init});

           

          //set counter

          sym.setParameter("counter", 0);

           

          //create variable to count the number of "right" drops

          var semafor = sym.composition.getStage().getParameter("counter");

           

          //define function init()

          function init(){

           

          //define draggable items and set scope to items that get accepted by droppable

          sym.$("majica_sym").draggable({scope:"gear"});

          sym.$("suknja_sym").draggable({scope:"gear"});

          sym.$("haljina_sym").draggable();

          sym.$("sesir_sym").draggable({scope:"gear"});

          sym.$("hlace_1_sym").draggable();

           

           

          //define droppable and the scope it accepts

          sym.$("zena_sym").droppable(

          {scope:"gear"},

           

          //define what happens when an item is dropped

          {drop: function() {

          semafor = semafor + 1;

          sym.getComposition().getStage().$("brpredmeta_txt").html(semafor);}

          }

           

          )

          }