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

    Drag and drop

    Aiesyaah Community Member

      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 Community Member

          http://jqueryui.com/

          Lots of code at this site inc drag and drop

          Alistair

          • 2. Re: Drag and drop
            Aiesyaah Community Member

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

            • 3. Re: Drag and drop
              resdesign 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" });

               

               

              });

              • 4. Re: Drag and drop
                Aiesyaah Community Member

                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 MVP

                    Is that a jquery pluggin?

                    • 7. Re: Drag and drop
                      oonanoona70 Community Member

                      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. 

                      • 8. Re: Drag and drop
                        resdesign MVP
                        • 9. Re: Drag and drop
                          oonanoona70 Community Member

                          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 Community Member

                            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 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 Community Member

                                  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 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 Community Member

                                      Thank u so much! *kisses*

                                      • 17. Re: Drag and drop
                                        resdesign MVP

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

                                        • 18. Re: Drag and drop
                                          Aiesyaah Community Member

                                          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 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 Community Member

                                              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 Community Member

                                                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 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 Community Member

                                                    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 Community Member

                                                      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 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 Community Member

                                                          Hi resdesign!

                                                           

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

                                                          • 27. Re: Drag and drop
                                                            Aiesyaah Community Member

                                                            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 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 Community Member

                                                                Hi resdesign,

                                                                 

                                                                Thanks for the heads up!

                                                                I checked it out and replied your message.

                                                                • 30. Re: Drag and drop
                                                                  resdesign 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 Community Member

                                                                    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 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

                                                                      • 33. Re: Drag and drop
                                                                        Digiddorf Community Member

                                                                        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 Community Member

                                                                          Hi resdesign,

                                                                           

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

                                                                          • 35. Re: Drag and drop
                                                                            designedbyjackley Community Member

                                                                            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 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 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 Community Member

                                                                                  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 Community Member

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

                                                                                    1 2 Previous Next