2 Replies Latest reply on Nov 15, 2012 12:37 AM by Aiesyaah

    Drag and drop for Tablet

    Aiesyaah

      Hi!

       

      I am working on an existing drag and drop animation which uses the mouse to move. The animation is being done in Adobe Edge. The animation works fine in the browser (using the mouse for the drag and drop). I want to make the animation to work on tablets, therefore, I will need to use the events: touchstart, touchmove and touchend.

       

      I managed to make to symbols drag around on the stage. However, all the symbols gets dragged together as a bunch. Also, the reset button does not seem to work in the tablet. How do I edit the codes for the reset button for the tablet?

       

      There would not be any conflict between the animation working in the browser and tablet, right? Does anyone have any basic drag and drop using tablet that involves several symbols and a reset button? Something I can refer to for my work?

       

      Thank you.

        • 1. Re: Drag and drop for Tablet
          Aiesyaah Level 1

          This is my codes for the drag and drop using the mouse (on the web browser).

           

          ------------------------------------------------------------------------------------------ ----------------------

           

          Model = function(datas){

           

           

                           this.defaultDatas ={

                               draggables :

                                     [{

                                     name:"_1"

                                     },{

                                     name:"_2"

                                     },{

                                     name:"_3"

                                     },{

                                     name:"_4"

                                     },{

                                     name:"_5"

                                     },{

                                     name:"_6"

                                     },{

                                     name:"_7"

                                     },{

                                     name:"_8"

                                     },{

                                     name:"_9"

                                     }],

                               droppables :

                                     [{

                                     name:"position1",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position2",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position3",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position4",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position5",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position6",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position7",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position8",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     },{

                                     name:"position9",

                                     dropout:'start',

                                     drop:'drop',

                                     dropover:'dropover'

                                     }],

                               dropOptions : {}

           

           

                   };//end of default values

           

           

                               var _datas = $.extend(this.defaultDatas,datas);

                               sym.$("data-div").data("model",{"itemDragged":"none","theme1":"000","theme2":"000","theme 3":"000","dropConfirm":"none"});

                               this.get=function(property){

                                    // forbid ojects to be passed as references by serializing de-serializing the prop.

                                    return JSON.parse(JSON.stringify(_datas[property]));

                               };// end get

           

           

                               this.set=function(property,value){

                                    _datas[property] = value ;

                               };//end set

           

           

          };//end of model

           

           

           

           

          Controller = function(model){

           

           

                       this.model = model;

           

           

           

           

                         this.setItemDragged = function (inval){

                              var values = sym.$("data-div").data("model");

                              values.itemDragged = inval;

                              sym.$("data-div").data("model",values);

           

           

                       }

           

           

                       this.setTheme = function (num,inval){

                              var values = sym.$("data-div").data("model");

                              var theme = "none";

           

           

                               if(num==="1"){

                                        theme = values.theme1;

                               }else if(num==="2"){

                                        theme = values.theme2;

                               }else if(num==="3"){

                                        theme = values.theme3;

                               } 

           

           

                               var num1 = parseInt(theme.substring(1,2));

                               var num2 = parseInt(theme.substring(2,3));

                               var num0 = 0;

           

           

                               if(inval>num2){

                                        num0 = num1;

                                        num1 = num2;

                                        num2 = inval;

                               }else if(inval>num1){

                                        num0 = num1;

                                        num1 = inval;

                               }else{

                                        num0 = inval;

                               }

                               theme = num0.toString()+num1.toString()+num2.toString();

                               if(num==="1"){

                                        values.theme1=theme;

                               }else if(num==="2"){

                                        values.theme2=theme;

                               }else if(num==="3"){

                                        values.theme3=theme;

                               } 

                               sym.$("data-div").data("model",values);              

                       }    

           

           

                       this.dropConfirm = function (inval){

                          var values = sym.$("data-div").data("model");

                              values["dropConfirm"] = inval;

                              sym.$("data-div").data("model",values);

                           // sym.$(inval).css({"left":220,"top":154});

                       }

           

           

                       this.get=function(property){

                          var values = sym.$("data-div").data("model");

                          return values[property];

                       }//end of get

           

           

           

           

                       var _this = this;

                       $(this).bind("setItemDragged",this.setItemDragged);

                       $(this).bind("setTheme",this.setTheme);

           

           

           

           

          };//end ctrller

           

           

          main = function(sym,w){

           

           

                       sym.play();

           

           

                       sym.$("stage").css("margin","auto");

           

           

                       sym.stop();

           

           

                       w.model = new Model({});

           

           

                       w.controller = new Controller(model);

           

           

                       $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js",onJqueryUILoad);

           

           

          };//end

           

           

          onJqueryUILoad = function(e){

                       // EN : when the script is loaded

                       viewInit(sym);

          };

           

           

          viewInit = function(sym){

                       var a = 3;

                       var counter = 0;

                       //draggable event

                       $.each(model.get("draggables"),function(){

           

           

                           var _this = this ;

                           //when drag is started, this event is called  

           

           

                         if(_this.name=="_1"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:60,bottom:85},

                                                            opacity: 0.8

                                                  });

           

           

                              }else if(_this.name=="_2"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:100,bottom:120 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_3"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:120,bottom:110 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_4"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }        

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:80,bottom:80 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_5"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:90,bottom:75 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_6"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }    

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:100,bottom:100 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_7"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:65,bottom:120 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_8"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:80,bottom:130 },

                                                            opacity: 0.8

                                                  });

                              }else if(_this.name=="_9"){

                                                  sym.$(_this.name).draggable(

                                                   {

                                                             helper: "clone",

                                                            revert: "invalid",

                                                            start: function(event, ui) {

                                                                      $(this).css("z-index", a++);

                                                                      sym.$(_this.name).hide();

                                                            },//end start

                                                            stop: function(event, ui) {

                                                                      if(controller.get("dropConfirm")!=_this.name){

                                                                                sym.$(_this.name).show();

                                                                      }

                                                            }      

                                                  },

                                                  {

                                                            cursor: "crosshair",

                                                            cursorAt: { left:70,bottom:80 },

                                                            opacity: 0.8

                                                  });

                              }

           

           

                           sym.$(_this.name).bind( "drag", function(event, ui) {

           

           

                                        controller.setItemDragged(_this.name);

           

           

                              });// end bind

                       });//end each draggable

           

           

                       $.each(model.get("droppables"),function(){

                           var _this = this;

                           sym.$(_this.name).droppable({ greedy:true,tolerance:"pointer"});

           

           

                           sym.$(_this.name).bind("drop",function(event,ui){

                                        var itemDragged = controller.get("itemDragged");

                                        //play animation

                                        sym.getComposition().getStage().getSymbol(_this.name).play(itemDragged);

                                        //sym.$(itemDragged).draggable("option", "disabled", true );

                                        //disable the droppable

                                        sym.$(_this.name).droppable("option", "disabled", true );

                                        //get the position num

                                        var item = parseInt(itemDragged.substring(1,2));//item num

                                        var position = parseInt(_this.name.substring(8,9));//position num

                                        //console.log(_this.name.substring(8,9));

                                        if(position<=3) {//update theme1

           

           

                                                  sym.$("category-label1").hide();

           

           

                                                  controller.setTheme("1",item);

                                        }else if(position<=6){//update theme1

                                                  sym.$("category-label2").hide();

                                                  controller.setTheme("2",item);

                                        }else if(position<=9){//update theme1

                                                  sym.$("category-label3").hide();

                                                  controller.setTheme("3",item);

                                        }

                                        var theme1 = controller.get("theme1");

                                        var theme2 = controller.get("theme2");

                                        var theme3 = controller.get("theme3");

                                        if(theme1.indexOf("0")==-1&&theme2.indexOf("0")==-1&&theme3.indexOf("0")== -1){

                                                  dif1 = parseInt(theme1.substring(1,2))-parseInt(theme1.substring(0,1));

                                                  dif2 = parseInt(theme1.substring(2,3))-parseInt(theme1.substring(1,2));

                                                  dif3 = parseInt(theme2.substring(1,2))-parseInt(theme2.substring(0,1));

                                                  dif4 = parseInt(theme2.substring(2,3))-parseInt(theme2.substring(1,2));

                                                  dif5 = parseInt(theme3.substring(1,2))-parseInt(theme3.substring(0,1));

                                                  dif6 = parseInt(theme3.substring(2,3))-parseInt(theme3.substring(1,2));

                                                  if(dif1==dif2&&dif2==dif3&&dif3==dif4&&dif4==dif5&&dif5==dif6&&dif6== 3){

                                                            sym.getComposition().getStage().getSymbol("feedback").play("sugg est");

           

           

                                                  }else if(dif1==dif2&&dif2==dif3&&dif3==dif4&&dif4==dif5&&dif5==dif6&&dif6==1){

                                                            sym.getComposition().getStage().getSymbol("feedback").play("corr ect");

           

           

                                                  }else {

                                                            sym.getComposition().getStage().getSymbol("feedback").play("wron g");

           

           

                                                  }

           

           

                                        }else{//hasn't completed yet

           

           

                                        }

                                        controller.dropConfirm(controller.get("itemDragged"));

           

           

           

           

                           });//end bind

                       });//end each

          };//end viewInit

           

           

           

           

           

           

          main(sym,window);

          // insert code here