8 Replies Latest reply on Sep 28, 2012 9:24 AM by TimJaramillo

    Drag multiples into one droppable div

    RussMSN

      I have implemented a drag and drop system into Edge, which works nicely, using JQuery UI  I have one droppable div, and will have around 9 draggables.  What I'm trying to do is get the droppable div to look at what is being dragged into it, and taking an action based on that.  I'm not a coder fyi, altho am picking it up quick well so feel free to be a bit more technical.

       

      So for example, if I drag in box1, it does action1, however dragging in box2 would do action2 - and so on.

       

      I just cannot get it to look at what I'm dragging and make the action. I've tried searching the net for a solution, and just cant find one that works within edge. I'd hugely appreciate any immediate help that anyone could offer to get this working.  I have included my code below so far (not complete):

       

       

       

      ============

      // insert code to be run when the symbol is created here
      $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js", function() {

      // Define the Variables
      var count = 0;
      var map = sym.$('Symbol_1');
      var highlight = sym.$("highlight");
      var drop = sym.$('Rectangle');
      var append1 = "<img src='images/fav1.png' id='append1' style='padding-left:5px;'>";
      var map1 = sym.$('fav22');

      // Make variables draggable
      map.draggable ({
         revert: true,

        });

      map1.draggable ();

      drop.droppable({    tolerance: "intersect",

         activate: function(event, ui) { highlight.css({"opacity":"0.3"}); },
        
         deactivate:  function(event, ui) { highlight.css({"opacity":"0"}) },
        
         drop: function( event, ui ) {
        
          if ( count < 9 && !$("#append1").length ) {
          
           drop.append(append1); count++; }
         
          else {
          
               alert("You have already added this video");}
             
               }
        

        
        
         });


       
      });

      =========

        • 1. Re: Drag multiples into one droppable div
          Dam4222 Level 1

          I dont have the answer but would love to see a tutorial on this when your done.

          • 2. Re: Drag multiples into one droppable div
            TimJaramillo Level 4

            Hey Russ,

             

            You can get the div "id" of the dropped div via the below line of code (add it to your "drop" function- so it can access the "ui" parameter). You can then add an if statement based on the "droppedId" (name) of your object.

             

            sym.droppedId = ui.draggable.attr('id');

             

            if( sym.droppedId == "object1" ){

                  //

            }else if( sym.droppedId == "object2" ){

                 //

            }

             

            See this Fiddle:

            http://jsfiddle.net/9RBJG/

            • 3. Re: Drag multiples into one droppable div
              RussMSN Level 2

              Huge thanks for your help Tim - Can you confirm this will work within Edge?  I remember seeing this solution on a jquery forum, so I tried the draggable.attr command and it didn't work, but then I don't remember putting a sym. before it (which I assume is the way to get it to work in edge?).

               

              Really appreciate your help with this, will definitely give it a go.

               

              EDIT:

               

              So I tried adding it, and it doesn't seem to work (unless I'm doing it wrong?).  My code below (I've bold the code I added):

               

              ==========

               

              $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js", function() {

              // Define the Variables

              var count = 0;

              var map = sym.$('drag1');

              var highlight = sym.$("highlight");

              var drop = sym.$('drop1');

              var append1 = "<img src='images/fav1.png' id='append1' style='padding-left:5px;'>";

              var map1 = sym.$('drag2');

               

               

               

              // Make variables draggable

              map.draggable ({

                 revert: true,

                });

              map1.draggable ({revert: true,});

              drop.droppable({    tolerance: "intersect",

               

                 activate: function(event, ui) { highlight.css({"opacity":"0.3"}); },

               

                 deactivate:  function(event, ui) { highlight.css({"opacity":"0"}) },

               

                 drop: function( event, ui ) {

               

                 sym.droppedId = ui.draggable.attr('id');

               

                  if ( count < 9 && !$("#append1").length && sym.droppedId == "drag1" ) {

               

                   drop.append(append1); count++; }

               

                  else {

               

                       alert("You have already added this video");}

               

                       }

               

               

               

                 });

               

               

               

              });

              =======

               

              It just keeps coming up with the alert message, regardless of the box I drag (from the if else statement).

               

              Any ideas?

              • 4. Re: Drag multiples into one droppable div
                TimJaramillo Level 4

                Hey Russ, yes indeed this works in Edge, (most any javascript works in Edge).

                 

                Below is your drag and drop code working, with a console log indicating the "id" of the item that was dropped. To see the console logs, open up the console log of your favorite broweser. In Chrome you can access the console here: View/Developer/Javscript Console/Console.

                 

                For javascript development, the console is an absolute necessity- I highly recommend you become good friends with it. It's helped me out on countless occasions!

                 

                example:

                www.timjaramillo.com/code/edge/drag_drop/test.html

                 

                source:

                www.timjaramillo.com/code/edge/_source/drag_drop.zip

                 

                Let me know how it goes!

                Tim

                • 5. Re: Drag multiples into one droppable div
                  TimJaramillo Level 4

                  Btw Russ, in your example, you need to declare the "droppedId" var initially.

                   

                  Since all your code is in the same scope, you can declare it at the top with your other vars:

                   

                  var droppedId;

                   

                  Then later when you reference this var, drop the "sym" and just use: "droppedId".

                   

                  This should work.

                  1 person found this helpful
                  • 6. Re: Drag multiples into one droppable div
                    RussMSN Level 2

                    Tim thanks a lot for your help, however it's not working.


                    The example you posted doesn't actually check the ID of the draggable and do an action based on that, all it does it make the two draggables and a droppable, and then makes one of them revert back, and the other not - it doesn't seem to actually check the ID other than to send it to the console.log.

                     

                    The problem I'm facing is when trying to implement that ui.draggable.attr("id"); into an if command, which is where it doesn't pick it up in edge.

                     

                    I've set the var at the top, and then pasted the code you said (sym.droppedId == "drag1") into the if command, but it always takes the else statement, rather than the if.  If I changed it around, so that  --  != "drag 1"  -- and it always takes the if command, so always appends.  It just won't pick up the actual ID WITHIN the animation, and then perform an action depending on the ID  

                     

                     

                    I've tried a few variations of the code and just can't get it to work - such as taking out the "sym." before the dropped id, or defining the ui.draggable.attr('id'); at the "var" rather than in the drop code - it must be something pretty simple I'm missing here:

                     

                    ===============

                     

                    $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js", function() {

                    // Define the Variables

                    var count = 0;

                    var map = sym.$('drag1');

                    var highlight = sym.$("highlight");

                    var drop = sym.$('drop1');

                    var append1 = "<img src='images/fav1.png' id='append1' style='padding-left:5px;'>";

                    var map1 = sym.$('drag2');

                    var droppedId;

                     

                    // Make variables draggable

                    map.draggable ({

                       revert: true,

                      });

                    map1.draggable ({revert: true,});

                    drop.droppable({    tolerance: "intersect",

                     

                       activate: function(event, ui) { highlight.css({"opacity":"0.3"}); },

                     

                       deactivate:  function(event, ui) { highlight.css({"opacity":"0"}) },

                     

                       drop: function( event, ui ) {

                     

                       sym.droppedId = ui.draggable.attr('id');

                     

                        if ( droppedId == "drag1" ) {

                     

                         drop.append(append1); count++; }

                     

                        else {

                     

                             alert("You have already added this video");}

                     

                             }

                     

                       });

                     

                    });

                     

                     

                    ==============

                    • 7. Re: Drag multiples into one droppable div
                      RussMSN Level 2

                      Actually have just worked it out, with your help Tim!  I had a look at the console, and actually when dragging something, it sets an ID of

                       

                      Stage_itemname

                       

                      so I had to change the if to == Stage_drag1 for it to work!

                       

                      Huzzah!  Thanks a lot!

                      • 8. Re: Drag multiples into one droppable div
                        TimJaramillo Level 4

                        Glad you got it working!

                         

                        Indeed, like I stated in my post, I was just getting the dropped object ID for you, and using console.log to display that object ID. I was leaving it up to you to do whatever you wanted with that object ID.