1 2 Previous Next 41 Replies Latest reply on Jun 21, 2013 5:10 PM by pelipas

    Drag and drop

    Aiesyaah Level 1

      Hi!

       

      Does anyone has any helpful, working codes for doing a drag and drop with animations after dropping into the droppable area? I need the drag and drop to be done in Adobe Edge. I have done one but I can't figure out why the animation does not play accordingly even after tweaking the codes. I'm not sure if it's just a bug in the Adobe Edge trial.

       

      Thank you for your time.

        • 1. Re: Drag and drop
          alistairgillan Level 1

          http://jqueryui.com/

          Lots of code at this site inc drag and drop

          Alistair

          1 person found this helpful
          • 2. Re: Drag and drop
            Aiesyaah Level 1

            Hey.. Thank you so much for the tip. I'll check it out and explore the codes

            • 3. Re: Drag and drop
              resdesign Adobe Community Professional & MVP

              Here is a way to use it:

               

               

              $.getScript("js/jquery-ui-1.9.1.custom.min.js", function() {

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

              info.draggable({ disabled: false });

              info.draggable({ snap: true });

              info.draggable({ axis: "x" });

               

               

              });

              1 person found this helpful
              • 4. Re: Drag and drop
                Aiesyaah Level 1

                Hey..

                Thank you for the response. I will try it and adapt it to my work.

                • 5. Re: Drag and drop
                  oonanoona70

                  The above code and plugin worked fine for me on my computer, but not on the ipad which pretty much makes it worthless these days.  Does anyone have code to get the threedub media drag and drop plugins to work in Edge? http://threedubmedia.com/code/event/drag/demo/basic

                   

                  These plugins work perfectly on the ipad.

                  • 6. Re: Drag and drop
                    resdesign Adobe Community Professional & MVP

                    Is that a jquery pluggin?

                    • 7. Re: Drag and drop
                      oonanoona70 Level 1

                      Thanks for your response!

                       

                      Yes, it uses Threedub media's jquery.event.drag-2.2 and jquery.event.drag.live-2.2.js that you can download here: http://threedubmedia.com/code/event/drag 

                       

                      I just can't get the right code in compositionReady to get it to work. 

                      • 9. Re: Drag and drop
                        oonanoona70 Level 1

                        This one looks great too.  My problem is more that I don't know how to get it to work in Edge.  I can get the code you added above, back in Februrary to work in Edge, but I don't know what to change, aside from the plugin name, to get it to work with other plugins such as pep or threeDubmedia. 

                         

                        $.getScript("js/jquery-ui-1.9.1.custom.min.js", function() {

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

                        info.draggable({ disabled: false });

                        info.draggable({ snap: true });

                        info.draggable({ axis: "x" });

                         

                         

                        });

                        • 10. Re: Drag and drop
                          oonanoona70 Level 1

                          I tried to replicate one of the basic Pep demos in Edge but it doesn't work with Edge:

                           

                          $.getScript("js/jquery.pep.js", function() {

                          $('circle').pep({

                            constrainToParent: true

                          });

                          • 11. Re: Drag and drop
                            resdesign Adobe Community Professional & MVP

                            Try yepnope to load your pluggin as below. Note the setting for your targetted symbol are between the {} in the lines below. viking is the name of the symbol.    .zoom({}) is the pluggin line in which you add the  parameters.

                             

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

                              viking.zoom({url: 'images/viking.png'});

                              viking.zoom({icon: 'true'});

                             

                             

                            .......................................................................................... ...........................................................

                             

                            yepnope(

                            {

                                      nope:[

                                      // add your js pliggin path here

                                      'js/jquery.zoom-min.js',

                                      ],

                                      complete: init

                            }

                            );

                             

                             

                            $(document).ready(function(){

                                $('img')

                                    .wrap('<span style="display:inline-block"></span>')

                                    .css('display', 'block')

                                    .parent()

                                    .zoom();

                             

                             

                            });

                             

                             

                            function init() {

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

                                      viking.zoom({url: 'images/viking.png'});

                                      viking.zoom({icon: 'true'});

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

                                      viking2.zoom({url: 'images/viking.jpg'});

                            }

                             

                            .......................................................................................... .............................................................

                             

                            You can also check how I did the weather pluggin:

                            http://forums.adobe.com/message/4850519#4850519

                            .......................................................................................... ................................................................

                            For the jquery.pep pluggin you add the parameters between the {} -

                             

                            sym.$("yourElement").pep({debug: true, drag: function(ev,obj){ console.log('we're dragging!') }, multiplier: 1.2 });

                             

                            or in this case the parameter are grouped into the variable "option" and this is what is passed in the parentheses  pep(option).

                            var options = {
                              debug:          true,
                              drag:           function(ev,obj){ console.log("we're dragging!") },
                              multiplier:     1.2
                            };


                            sym.$("yourElement").pep(options);

                             

                            // let me know if you need more input.

                            • 13. Re: Drag and drop
                              Digiddorf

                              resdesign,

                               

                              could u give us an example in adobe edge?

                               

                              simple example with only one object, dragging around in adobe edge like this?

                               

                              Here is a simple example with one object!

                               

                              What should i do?

                               

                              http://oi46.tinypic.com/2cwldsi.jpg

                               

                              only want to drag and move the cycle.

                              • 14. Re: Drag and drop
                                Aiesyaah Level 1

                                Hi Digiddorf,

                                 

                                I share the same problem as you too. I need a working example of drag and drop in tablets. Specifically for it to work in Adobe Edge. I actually need to display a feedback after I have finished dragging everything into the droppable areas. And then reset the whole animation all over again.

                                 

                                - resdesign, can you help?

                                 

                                thank you

                                • 15. Re: Drag and drop
                                  resdesign Adobe Community Professional & MVP

                                  Here is an example. It is a rectangle instead of a circle. Sorry I will be out today until the afternoon.

                                   

                                  https://www.box.com/s/x91cv8pggdmrriarh74c

                                  • 16. Re: Drag and drop
                                    Digiddorf Level 1

                                    Thank u so much! *kisses*

                                    • 17. Re: Drag and drop
                                      resdesign Adobe Community Professional & MVP

                                      Will try do give a more detailed example later today or tomorrow.

                                      • 18. Re: Drag and drop
                                        Aiesyaah Level 1

                                        Hi resdesign,

                                         

                                        Can this be used for drag and drop in tablets? The whole animation has to be done in Adobe Edge though. I need to drag some elements over to some boxes, and then a feedback will play after all the boxes have been dragged over.

                                         

                                        Thank you.

                                         

                                        Regards,

                                        Aisyah.

                                        • 19. Re: Drag and drop
                                          resdesign Adobe Community Professional & MVP

                                          The jquery.pep.js works with tablets. You will have to write your own code to accomplish what you want.

                                          You have settings that are documented here:

                                          https://github.com/briangonzalez/jquery.pep.js

                                           

                                          draggable with jqueryUI will work it you add touch events and may give you move flexibility.

                                          • 20. Re: Drag and drop
                                            Aiesyaah Level 1

                                            Hi resdesign!

                                             

                                            Thanks for the tip. But can you explain further on how do I adapt this to my drag and drop? Where do I add in the jquery.pep.js? In the Adobe Edge file?

                                             

                                            I don't understand where to start. I hope you can give me some guidance on this. Thank you so much

                                            • 21. Re: Drag and drop
                                              Aiesyaah Level 1

                                              Hi resdesign,

                                               

                                              I can drag and drop my elements. But once I touched on 1 element to be dragged, all the other elements either get hidden or the positions get messed up. I wonder if you know why this is happening.

                                               

                                              The following are snippets of my codes:

                                               

                                              //)1 touchstart touchmove



                                              //
                                              sym.$("_1").css({"margin-left": "-10px", "margin-top": "-10px"});


                                              sym.$("_1").css({"margin-left": "100px", "margin-top": "100px"});


                                              sym.$("_1").bind("touchstart touchmove", function(a) {


                                              a.preventDefault();


                                              var orig1 = a.originalEvent;


                                              var x = orig1.changedTouches[0].pageX;


                                              var y = orig1.changedTouches[0].pageY;


                                              sym.$("_1").css({top: y, left: x});

                                              });

                                               

                                               

                                              // _1: touchend

                                              //orig:sym.$("_1").css({"margin-left": "-30px", "margin-top": "-30px"});


                                              sym.$("_1").css({"margin-left": "-70px", "margin-top": "-70px"});


                                              sym.$("_1").bind("touchend", function(a) {


                                              a.preventDefault();


                                              var orig1 = a.originalEvent;


                                              var x = orig1.changedTouches[0].pageX;


                                              var y = orig1.changedTouches[0].pageY;


                                              sym.$("_1").css({top: y, left: x});

                                              });

                                               

                                               

                                               

                                               

                                              //_2: touchstart, touchmove



                                              sym.$("_2").css({"margin-left": "20px", "margin-top": "20px"});


                                              sym.$("_2").bind("touchstart touchmove", function(b) {

                                                 b.preventDefault();


                                              var orig2 = b.originalEvent;


                                              var x = orig2.changedTouches[0].pageX;


                                              var y = orig2.changedTouches[0].pageY;


                                              sym.$("_2").css({top: y, left: x});

                                              });

                                               

                                               

                                              // _2: touchend



                                              sym.$("_2").css({"margin-left": "-80px", "margin-top": "-80px"});


                                              sym.$("_2").bind("touchend mouseup", function(b) {

                                                 b.preventDefault();

                                                 var orig2 = b.originalEvent;

                                                 var x = orig2.changedTouches[0].pageX;

                                                 var y = orig2.changedTouches[0].pageY;

                                                 sym.$("_2").css({top: y, left: x});

                                              });

                                               

                                               

                                               

                                               

                                              //_3: touchstart, touchmove



                                              sym.$("_3").css({"margin-left": "20px", "margin-top": "20px"});


                                              sym.$("_3").bind("touchstart touchmove", function(c) {

                                                 c.preventDefault();

                                                 var orig3 = c.originalEvent;

                                                 var x = orig3.changedTouches[0].pageX;

                                                 var y = orig3.changedTouches[0].pageY;

                                                 sym.$("_3").css({top: y, left: x});

                                              });

                                               

                                               

                                               

                                               

                                              // _3: touchend



                                              sym.$("_3").css({"margin-left": "-90px", "margin-top": "-90px"});


                                              sym.$("_3").bind("touchend mouseup", function(c) {


                                              c.preventDefault();

                                                 var orig3 = c.originalEvent;

                                                 var x = orig3.changedTouches[0].pageX;

                                                 var y = orig3.changedTouches[0].pageY;

                                                 sym.$("_3").css({top: y, left: x});

                                              });

                                              • 22. Re: Drag and drop
                                                resdesign Adobe Community Professional & MVP

                                                Not sure what is happening. I do not have my iPad today to check the behavior. I will check tomorrow but I hope someone can help you before.

                                                 

                                                In the mean time could you post a sample?

                                                 

                                                At first look without an Ipad to test:


                                                I think that you should probably add z-index for each element so that the last touched symbol moves out of the top and lets you drag the other symbols.

                                                 

                                                I added this on touchmove

                                                 

                                                sym.$("_1").css("z-index", 100);

                                                 

                                                and this on touchend;

                                                 

                                                sym.$("_1").css("z-index", 0);

                                                 

                                                Where did you put your code? I see some conflicts with css and variables.

                                                • 23. Re: Drag and drop
                                                  Aiesyaah Level 1

                                                  Hi resdesign,

                                                   

                                                  I added the codes at the Stage.

                                                   

                                                  I have made this drag and drop work on the PC. These are how it is supposed to work.

                                                  1.png
                                                  This is the how the whole layout looks like. User has to drag the elements into 3 categories.

                                                  2.png

                                                  This will display the Incorrect Feedback animation. After which, the user can click on Reset button to drag the elements again.

                                                   

                                                  3.png

                                                  This will display the Correct Feedback animation. After which, the user can click on Reset button to drag the elements again.

                                                   

                                                  And the following pictures is how it is on tablet.

                                                   

                                                  2012-11-27 10.33.03.jpg

                                                  2012-11-27 10.34.13.jpg

                                                   

                                                  By the way, I have included the lines which you have mentioned. The above 2 pictures are the latest update which I have.

                                                  • 24. Re: Drag and drop
                                                    Aiesyaah Level 1

                                                    Hi resdesign,

                                                     

                                                    These are the codes which I used for Drag and Drop on the PC. Thank you so much for your time.

                                                     

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

                                                     

                                                    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

                                                    • 25. Re: Drag and drop
                                                      resdesign Adobe Community Professional & MVP

                                                      Maybe you could check this site to see if that can help:

                                                      http://briangonzalez.org/blog/pep

                                                       

                                                      I will look at it tonight.

                                                      • 26. Re: Drag and drop
                                                        Aiesyaah Level 1

                                                        Hi resdesign!

                                                         

                                                        Thank you for the link, I'll check it out. Hopefully this will help

                                                        • 27. Re: Drag and drop
                                                          Aiesyaah Level 1

                                                          Hi resdesign,

                                                           

                                                          Do you mean I have to refer to this codes? https://github.com/briangonzalez/jquery.pep.js/blob/master/jquery.pep.js
                                                          So i don't have to download anything?

                                                           

                                                          Thank you.

                                                           

                                                          Aisyah

                                                          • 28. Re: Drag and drop
                                                            resdesign Adobe Community Professional & MVP

                                                            You do need to have the jquery-pep.js file in your project.

                                                            Below is how to load it:

                                                             

                                                            yepnope(

                                                            {

                                                                      nope:[

                                                                      'js/jquery.pep.js',

                                                                      ],

                                                                      complete: init

                                                            }

                                                            );

                                                             

                                                              

                                                            function init() {

                                                               var rectangle = sym.$("Rectangle");

                                                               //limit element drag to its container

                                                                      rectangle.pep({constrainToParent: true});

                                                            }

                                                             

                                                             

                                                            You can insert your code in the init function.

                                                             

                                                            You can also have callbacks. See the yepnope doc for more info at:

                                                            http://yepnopejs.com/

                                                            • 29. Re: Drag and drop
                                                              Aiesyaah Level 1

                                                              Hi resdesign,

                                                               

                                                              Thanks for the heads up!

                                                              I checked it out and replied your message.

                                                              • 30. Re: Drag and drop
                                                                resdesign Adobe Community Professional & MVP

                                                                Here is a working very simple sample using

                                                                jquery-ui-1.9.2.custom.min.js  // for draggable and droppable

                                                                and

                                                                jquery.ui.touch-punch.min.js   // adds function on tablets.

                                                                 

                                                                https://www.box.com/s/vtile6ea3h16g2nm1fuz

                                                                • 31. Re: Drag and drop
                                                                  Aiesyaah Level 1

                                                                  Hi resdesign,

                                                                   

                                                                  Thank you for your help. This is quite close to what I have to do. I appreciate it alot.

                                                                  • 32. Re: Drag and drop
                                                                    resdesign Adobe Community Professional & MVP

                                                                    Check the updated file below to play a symbol for your feedback. You have to uncheck autoplay in the symbol.

                                                                    The container in the file was a test for constrain but the stage can be used instead of that container if you want to make sure that the droppables are not dragged outside of the stage and lost! This is also updated in the new file.

                                                                     

                                                                    https://www.box.com/s/vtile6ea3h16g2nm1fuz

                                                                    1 person found this helpful
                                                                    • 33. Re: Drag and drop
                                                                      Digiddorf Level 1

                                                                      i need an example for jquery.pep and this case:

                                                                       

                                                                      dropping an item above another… then open a new URL!

                                                                       

                                                                      Could somebody help me?

                                                                      • 34. Re: Drag and drop
                                                                        Aiesyaah Level 1

                                                                        Hi resdesign,

                                                                         

                                                                        Thank you for your help. I'm checking this file out now

                                                                        • 35. Re: Drag and drop
                                                                          designedbyjackley Level 1

                                                                          Hey There,

                                                                           

                                                                          I was wondering how you delared the accept: ".case1", ?? If I look at your file it and try to use another asset for the draggable objects it no longer triggers the box animation... unless I comment out the accept... but that is crutial for specifying which draggable objects react with the specific targets. I noticed the JSON file and wondered what was referencing that, or if that was handling something that I was unaware of.

                                                                           

                                                                          Also I noticed when you publish it and preview in the browser you have to click and drag on the gray sqaures 3-8 times to actually get them to drag, unlike when testing from Edge.

                                                                           

                                                                          I can tell how knowledgeable you are and wondered if you could help shed some light on this for me...

                                                                           

                                                                          Thx so much!

                                                                          • 36. Re: Drag and drop
                                                                            resdesign Adobe Community Professional & MVP

                                                                            You have to give the elements a class ID.  Click on the element, click on the C in the gray box and then type in the element class name.

                                                                            12-3-2012 1-51-15 PM.png

                                                                            • 37. Re: Drag and drop
                                                                              resdesign Adobe Community Professional & MVP

                                                                              "Also I noticed when you publish it and preview in the browser you have to click and drag on the gray sqaures 3-8 times to actually get them to drag, unlike when testing from Edge."

                                                                               

                                                                              Strange. I tried several browsers and did not have this issue.

                                                                              • 38. Re: Drag and drop
                                                                                designedbyjackley Level 1

                                                                                Blazing fast reply! AMAZING! ... Have you noticed having to click and drag it multiple times in the browser before it actaully starts dragging after publishing the file?

                                                                                • 39. Re: Drag and drop
                                                                                  designedbyjackley Level 1

                                                                                  I just noticed I was missing the CSS folder... doh! Thx for the ahhhah moment!

                                                                                  1 2 Previous Next