3 Replies Latest reply on Aug 9, 2013 4:16 PM by YOSHIOKA Ume

    How to change the position of an element with code?

    chino_10

      Hi! I'm doing a drag & drop, in this case they send me a question and 4 answer options, the user has to drag the correct answer into a box, then the question change and a new 4 answers appears. But i cant' "reset" the position of my draggable elements for the next question.

       

      Please help me =)

       

      i'm using this code :

       

       

      yepnope(

      {

          nope:[

            'js/jquery-ui-1.9.2.custom.min.js',

            'js/jquery.ui.touch-punch.min.js',

            'css/jquery-ui-1.9.2.custom.min.css'

           ],

          complete: init

      }

      );

       

       

      function init() {

                var stage = sym.$("Stage");

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

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

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

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

                Rect1.html("1");

                Rect2.html("2");

                Rect3.html("3");

                Rect4.html("4");

                Rect1.css("text-align", "center");

                Rect2.css("text-align", "center");

                Rect3.css("text-align", "center");

                Rect4.css("text-align", "center");

       

       

                Rect1.draggable({ containment: stage});

                Rect2.draggable({ containment: stage });

                Rect3.draggable({ containment: stage });

                Rect4.draggable({ containment: stage });

                Rect1.draggable( "option", "revert", "invalid");// If the user doesn't drag the correct answer, it return's to original position, but if he answer right, the draggable have to snap to the box.

                Rect2.draggable( "option", "revert", "invalid");

                Rect3.draggable( "option", "revert", "invalid");

                Rect4.draggable( "option", "revert", "invalid");

       

       

         // droppable box

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

                dropCase1.css("position", "absolute");

       

       

                dropCase1.droppable({

                                    accept: caso, // my var "caso" is changing according the current question. for that i use a switch /case statement.

       

       

                          drop: function(event, ui) {

                                    console.log("bien");

                          }

       

       

                });

      }

        • 1. Re: How to change the position of an element with code?
          YOSHIOKA Ume Level 3

          Hi, chino_10.

          I tried!

           

          1.set 4 rects & dropCase.

          dd.png

          2. add code

          var correctID = sym.$("Rect1").attr("id");  //correct rect
          
          function init(){
            sym.$("dropCase").droppable({
              accept:".button",
              tolerance: "fit",
              drop:function(evt, ui){
                if(ui.draggable.attr("id")==correctID){
                  console.log("correct");
                  ui.draggable({revert:false}); //turn off revert flag
                }else{
                  console.log("incorrect");
                }
              }
            });
            $(".button").draggable({revert:true});
          }
          
          //load jQuery-ui from CDN & init
          yepnope({
           nope:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
           complete:init
          });
          

          hth. Ume.

          • 2. Re: How to change the position of an element with code?
            chino_10 Level 1

            Thank's that help's me a lot!!

             

            Now i have other problem and i hope you can help me

             

            I have 10 draggable items and i have to drag 6 of them into a box.

             

            The user can drag 1 to 10 items into the box, then he click's a check button, if he drag 6 then the answer is correct, if he drags any other number the answer is incorrect. Again my problem is when i have to "reset" the game..

             

            Please please help me guys I'm stuck.

             

             

            Here is my code

             

             

            // This code is inside a trigger in a symbol timeline

             

             

            yepnope(

            {

                nope:[

                  'js/jquery-ui-1.9.2.custom.min.js',

                  'js/jquery.ui.touch-punch.min.js',

                  'css/jquery-ui-1.9.2.custom.min.css'

                 ],

                complete: init

            }

            );

             

             

            function init() {

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

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

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

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

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

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

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

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

             

             

                      car1.draggable({ containment: stage });

                      car2.draggable({ containment: stage });

                      car3.draggable({ containment: stage });

                      car4.draggable({ containment: stage });

                      car5.draggable({ containment: stage });

                      car6.draggable({ containment: stage });

                      car7.draggable({ containment: stage });

                      car8.draggable({ containment: stage });

             

             

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

             

             

                      dropCase1.droppable({

                                          accept: ".case1",                                             // all my draggable items (cars) have the same class ".case1"

                                          activeClass: 'ui-state-hover',

                                          hoverClass: 'ui-state-active',

                                          drop: function(event, ui) {

                              switch (caso){                                           //i use this var "caso" to difference the dragable item, onClik

                                                              case ".case1":

                                                                        car1.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case2":

                                                                        car2.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case3":

                                                                        car3.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case4":

                                                                        car4.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case5":

                                                                        car5.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case6":

                                                                        car6.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case7":

                                                                        car7.draggable( "option", "disabled", true );

                                                              break;

                                                              case ".case8":

                                                                        car8.draggable( "option", "disabled", true );

                                                              break;

                                                    }

                                                    counter++;                // this counts the number of items the user drag into the box

                             

                                           }

                      });

             

             

            }

             

             

             

            //**************************** This is my "check button" code:**********************

             

            if (counter == 6){

                 console.log ("good")

            } else {

                 counter = 0;

                 /// here i have to "reset" my game position.

            }

            • 3. Re: How to change the position of an element with code?
              YOSHIOKA Ume Level 3

              Hi.

               

              hmm... use $(elem).data() to recording base position of element.

               

              spadework:

              1.add class ".case1" to draggable elements.

              2.add class ".correct" to correct elements. so correct elem has two classes "case1 correct".

               

              code is like this.

              //record the pos data to .case1-element.
              $(".case1").each(function(index,elm){
                var $hdl = $(elm);
                $hdl.data("basePos",{top:$hdl.css("top"),left:$hdl.css("left")});
              });
              //get the pos data & animate.
              sym.$("checkButton").click(function(){
                $(".case1").each(function(index,elm){
                  var $hdl = $(elm);
                  $hdl.animate($hdl.data("basePos"));
                });
              });
              function init(){
                sym.$("dropCase").droppable({
                  accept:".correct",  //accept only ".correct" elem.
                  tolerance: "fit",
                  drop:function(evt, ui){
                      console.log("correct");
                      ui.draggable.draggable({revert:false}); //turn off revert flag
                  }
                });
                $(".case1").draggable({revert:true});
              }
              //load jQuery-ui from CDN & init
              yepnope({
               nope:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
               complete:init
              });
              

              hth. Ume.