9 Replies Latest reply on Jun 19, 2014 9:22 AM by dharmk

    Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?

    jamesfootlight Level 1

      In the attached file, I have a series of symbols that have a drag and drop command to change colour at different sections of a bullseye, and that are also text editable (html).

      However, some of the symbols get stuck and will not be moved after moving once or at all, and some get stuck once their text has been edited.

      I have poured over the code and it appears to be the same for each symbol - can anyone explain as to why this is happening?

       

      I also cannot now edit the text properly on the ipad (it is really fiddly to change between different symbols to edit their text -- is there maybe a better way to do this? A button to change between symbols to then edit their text, can you help with this too?)

       

      THANK YOU SO MUCH!!!

       

      File here:

       

      https://www.dropbox.com/s/g71gnfichjgyehn/NEW%20RISK%20RADAR.zip

        • 1. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
          dharmk Adobe Employee

          Hi James,

           

          I haven't looked at the handlers properly, but I see that there is a lot of code duplication. You can replace the code from line 42 till 332 with the following:

           

          risk.forEach(function(r) {

          // apply the draggable JQuery UI plugin to the MyDraggableSymbol symbol on your stage

            sym.$(r).draggable({

            start: function(e){},

            drag: function(e,ui)

            {

            sym.getSymbol(r).stop("Initial");

            sym.setVariable("symName",r);

            }

            }

            );

           

            //adding for risk3_orange similarly add for other symbols

            sym.$(r).draggable();

            sym.getSymbol(r).$(r).bind('click tap',function(ev) {

             sym.$(r).draggable('disable');

            }).unbind('dblclick taphold',function(ev) {

             sym.$(r).draggable('enable');

            });

          });

           

          Assuming that your handlers are setup correctly, it should work the same way for all the instances.

           

          Regards,

          Dharmendra

          • 2. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
            jamesfootlight Level 1

            Hi,

             

            When you say:

             

              //adding for risk3_orange similarly add for other symbols

             

            Where and how do I "add similarly for other symbols"? As I dont see how the code you then list is applied to risk3_orange as 'risk3_oramge'  is not mentioned in the code?

             

            Sorry for being dumb!

             

            Thanks

             

            James

            • 3. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
              dharmk Adobe Employee

              Thats a copy paste issue James, it was a comment in your code. Basically, we are trying to attach the handlers for each element in your risk array represented by 'r' within the loop.

               

              -Dharmendra

              1 person found this helpful
              • 4. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
                jamesfootlight Level 1

                Hi, I thought it was a copy and paste issue, but am I copying an Latin the same piece of identical code 12 times or referencing each risk ie risk1, risk2 etc within each paste and if so where within each pasted code as surely it has to reference the symbol each time??

                 

                Thanks

                 

                Sent from my iPhone

                • 5. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
                  jamesfootlight Level 1

                  Hi, I think I undertsand what you mean now, so the code is as below, btu I am not sure what a handler is? but some of my risks still get stuck once the text has been changed on them:

                   

                  // Use for loop for attr

                  // deleted  yepnope since you load with scropt loading

                  // added pos for each symbol so we can replace them there.

                  document.ontouchmove = function(e) {

                          e.preventDefault();

                      };

                  var risk = ;

                  var Pos = [

                  {'x':-9,'y':806},

                  {'x':27,'y':854},

                  {'x':72,'y':894},

                  {'x':71,'y':934},

                  {'x':231,'y':811},

                  {'x':231,'y':853},

                  {'x':231,'y':894},

                  {'x':231,'y':934},

                  {'x':388,'y':811},

                  {'x':388,'y':852},

                  {'x':388,'y':893},

                  {'x':388,'y':934},

                  {'x':543,'y':811},

                  {'x':543,'y':853},

                  {'x':543,'y':893},

                  {'x':543,'y':934}

                  ];

                   

                  var myText = ; 

                   

                  for (i=0;i<risk.length;i++){

                  sym.getSymbol(risk[i]).$(risk[i]).attr("contenteditable",true);

                  sym.$('Quadrant_text').attr("contenteditable",true);

                  sym.$('Quadrant1_text').attr("contenteditable",true);

                  sym.$('Quadrant2_text').attr("contenteditable",true);

                  sym.$('Quadrant3_text').attr("contenteditable",true);

                   

                  }

                   

                  // apply the draggable JQuery UI plugin to the MyDraggableSymbol symbol on your stage

                  sym.$('Risk1').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk1").stop("Initial");

                    sym.setVariable("symName","Risk1");

                  }

                  }

                  );

                   

                  //adding for risk3_orange similarly add for other symbols

                  sym.$('Risk1').draggable();

                  sym.getSymbol('Risk1').$("Risk1").bind('click tap',function(ev) {

                       sym.$('Risk1').draggable('disable');

                  }).unbind('dblclick tap',function(ev) {

                       sym.$('Risk1').draggable('enable');

                  });

                   

                  sym.$('Risk2').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk2").stop("Initial");

                    sym.setVariable("symName","Risk2");

                  }

                  }

                  );

                   

                  //adding for Risk2 similarly add for other symbols

                  sym.$('Risk2').draggable();

                  sym.getSymbol('Risk2').$("Risk2").bind('click tap',function(ev) {

                       sym.$('Risk2').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk2').draggable('enable');

                  });

                   

                  sym.$('Risk3').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk3").stop("Initial");

                    sym.setVariable("symName","Risk3");

                  }

                  }

                  );

                   

                  //adding for Risk3 similarly add for other symbols

                  sym.$('Risk3').draggable();

                  sym.getSymbol('Risk3').$("Risk3").bind('click tap',function(ev) {

                       sym.$('Risk3').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk3').draggable('enable');

                  });

                   

                  sym.$('Risk4').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk4").stop("Initial");

                    sym.setVariable("symName","Risk4");

                  }

                  }

                  );

                   

                  //adding for Risk4 similarly add for other symbols

                  sym.$('Risk4').draggable();

                  sym.getSymbol('Risk4').$("Risk4").bind('click tap',function(ev) {

                       sym.$('Risk4').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk4').draggable('enable');

                  });

                   

                  sym.$('Risk5').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk5").stop("Initial");

                    sym.setVariable("symName","Risk5");

                  }

                  }

                  );

                   

                  //adding for Risk5 similarly add for other symbols

                  sym.$('Risk5').draggable();

                  sym.getSymbol('Risk5').$("Risk5").bind('click tap',function(ev) {

                       sym.$('Risk5').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk5').draggable('enable');

                  });

                   

                  sym.$('Risk6').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk6").stop("Initial");

                    sym.setVariable("symName","Risk6");

                  }

                  }

                  );

                   

                  //adding for Risk6 similarly add for other symbols

                  sym.$('Risk6').draggable();

                  sym.getSymbol('Risk6').$("Risk6").bind('click tap',function(ev) {

                       sym.$('Risk6').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk6').draggable('enable');

                  });

                   

                  sym.$('Risk7').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk7").stop("Initial");

                    sym.setVariable("symName","Risk7");

                  }

                  }

                  );

                   

                  //adding for Risk7 similarly add for other symbols

                  sym.$('Risk7').draggable();

                  sym.getSymbol('Risk7').$("Risk7").bind('click tap',function(ev) {

                       sym.$('Risk7').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk7').draggable('enable');

                  });

                   

                  sym.$('Risk8').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk8").stop("Initial");

                    sym.setVariable("symName","Risk8");

                  }

                  }

                  );

                   

                  //adding for Risk8 similarly add for other symbols

                  sym.$('Risk8').draggable();

                  sym.getSymbol('Risk8').$("Risk8").bind('click tap',function(ev) {

                       sym.$('Risk8').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk8').draggable('enable');

                  });

                   

                  sym.$('Risk9').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk9").stop("Initial");

                    sym.setVariable("symName","Risk9");

                  }

                  }

                  );

                   

                  //adding for Risk9 similarly add for other symbols

                  sym.$('Risk9').draggable();

                  sym.getSymbol('Risk9').$("Risk9").bind('click tap',function(ev) {

                       sym.$('Risk9').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk9').draggable('enable');

                  });

                   

                  sym.$('Risk10').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk10").stop("Initial");

                    sym.setVariable("symName","Risk10");

                  }

                  }

                  );

                   

                  //adding for Risk10 similarly add for other symbols

                  sym.$('Risk10').draggable();

                  sym.getSymbol('Risk10').$("Risk10").bind('click tap',function(ev) {

                       sym.$('Risk10').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk10').draggable('enable');

                  });

                   

                  sym.$('Risk11').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk11").stop("Initial");

                    sym.setVariable("symName","Risk11");

                  }

                  }

                  );

                   

                  //adding for Risk11 similarly add for other symbols

                  sym.$('Risk11').draggable();

                  sym.getSymbol('Risk11').$("Risk11").bind('click tap',function(ev) {

                       sym.$('Risk11').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk11').draggable('enable');

                  });

                   

                  sym.$('Risk12').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk12").stop("Initial");

                    sym.setVariable("symName","Risk12");

                  }

                  }

                  );

                   

                  //adding for Risk12 similarly add for other symbols

                  sym.$('Risk12').draggable();

                  sym.getSymbol('Risk12').$("Risk12").bind('click tap',function(ev) {

                       sym.$('Risk12').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk12').draggable('enable');

                  });

                   

                  sym.$('Risk13').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk13").stop("Initial");

                    sym.setVariable("symName","Risk13");

                  }

                  }

                  );

                   

                  //adding for Risk13 similarly add for other symbols

                  sym.$('Risk13').draggable();

                  sym.getSymbol('Risk13').$("Risk13").bind('click tap',function(ev) {

                       sym.$('Risk13').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk13').draggable('enable');

                  });

                   

                  sym.$('Risk14').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk14").stop("Initial");

                    sym.setVariable("symName","Risk14");

                  }

                  }

                  );

                   

                  //adding for Risk14 similarly add for other symbols

                  sym.$('Risk14').draggable();

                  sym.getSymbol('Risk14').$("Risk14").bind('click tap',function(ev) {

                       sym.$('Risk14').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk14').draggable('enable');

                  });

                   

                  sym.$('Risk15').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk15").stop("Initial");

                    sym.setVariable("symName","Risk15");

                  }

                  }

                  );

                   

                  //adding for Risk15 similarly add for other symbols

                  sym.$('Risk15').draggable();

                  sym.getSymbol('Risk15').$("Risk15").bind('click tap',function(ev) {

                       sym.$('Risk15').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk15').draggable('enable');

                  });

                   

                  sym.$('Risk16').draggable(,

                  drag: function(e,ui)

                  {

                    sym.getSymbol("Risk16").stop("Initial");

                    sym.setVariable("symName","Risk16");

                  }

                  }

                  );

                   

                  //adding for Risk16 similarly add for other symbols

                  sym.$('Risk16').draggable();

                  sym.getSymbol('Risk16').$("Risk16").bind('click tap',function(ev) {

                       sym.$('Risk16').draggable('disable');

                  }).bind('dblclick tap',function(ev) {

                       sym.$('Risk16').draggable('enable');

                  });

                   

                  sym.getSymbol("Drop").$('Outer').droppable(

                  });

                   

                  sym.getSymbol("Drop").$('Middle').droppable(

                  });

                   

                  sym.getSymbol("Drop").$('Target').droppable(

                  });

                   

                  //}

                   

                  sym.$('resetBtn').click(function(){

                    sym.$('Quadrant_text').html('Quadrant');

                    sym.$('Quadrant1_text').html('Quadrant');

                    sym.$('Quadrant2_text').html('Quadrant');

                    sym.$('Quadrant3_text').html('Quadrant');

                   

                  for (i=0;i<risk.length;i++){

                    sym.$(risk[i]).css({"left":Pos[i].x,"top":Pos[i].y,"position":"absolute"})

                    sym.getSymbol(risk[i]).stop(0);

                    sym.getSymbol(risk[i]).$(risk[i]).html("Challenge");

                  }

                   

                  });

                   

                   

                  But is still doesn't work,

                   

                   

                  Subject: Re:  Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?

                  • 6. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
                    jamesfootlight Level 1

                    in fact, none of them can move once their text has been edited!

                    • 7. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
                      dharmk Adobe Employee

                      Hi James,

                       

                      I haven't looked at your handlers yet. My last suggestion was to minimize the code duplication so that you get the same behavior for each instance on which it is attached.

                      I will take a look at it and let you know. As far as i understand, you want the instances to be draggable after the text edit is completed.

                       

                      Regards,

                      Dharmendra

                      • 8. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
                        jamesfootlight Level 1

                        Yes thanks, the code is much trimmer now thanks for that. The trick now is to ensure that the instances are draggable after the text is edit is completed as you say, thanks for all your help

                        • 9. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
                          dharmk Adobe Employee

                          Hi James,

                           

                          You can replace this part:

                           

                            //adding for risk3_orange similarly add for other symbols

                            sym.$(r).draggable();

                            sym.getSymbol(r).$(r).bind('click tap',function(ev) {

                            sym.$(r).draggable('disable');

                            }).unbind('dblclick taphold',function(ev) {

                            sym.$(r).draggable('enable');

                            });

                           

                          With this:

                           

                            sym.getSymbol(r).$(r).bind('focusin tap',function(ev) {

                            sym.$(r).draggable('disable');

                            }).bind('focusout',function(ev) {

                            sym.$(r).draggable('enable');

                            });

                           

                          It should give you the behavior that you need.

                           

                          Regards,

                          Dharmendra

                          1 person found this helpful