0 Replies Latest reply on Sep 26, 2013 5:16 AM by gcgCui

    Can´t find the way to make it work

    gcgCui

      Hi I asked this in this forum and others but nobody could give me an answer. I´m gonna try to explain it with more information and all the ways I had try to make it work.

       

      First I´ll show you how my proyect is structured :

       

      Captura de pantalla 2013-09-26 a la(s) 13.09.31.png

       

      Those are all the scenes of the proyect (it is an interactive book).

       

      My problem is with the scene5 (" _escena5") it looks like this :

       

      Captura de pantalla 2013-09-26 a la(s) 13.10.16.png

      Ok the current action affects to the symbol selected "_filtroEscena5" and it has this inside :

       

      Captura de pantalla 2013-09-26 a la(s) 13.10.51.png

       

      Allright,now I will explain the action:

       

      I need to drag the symbol "_filtroEscena5" but only when I click on the "Ellipse". Ok, the easy way to do this is with a handle on the .draggable property well this works fine. The problem is the other part of the action. I have on the "_escena5" a few triggers "btnFantasma", "btnOsos" and "btnVini" those trigges have to been activate when the ellipse goes over. This is a scene of a lantern, you drag the light and when you illuminate the Triggers something happens.

       

      So here is my problem, I can´t get the last part working. I first used the accept drop function. I made my triggers droppable and at the accept parameter I put this:

       

      sym.getSymbol("_escena5").getSymbol('_filtroEscena5').$('Ellipse'),

       

      But this does not work, if I make a rectangle o something like these to test it and put it on the accept it works, but not with the "Ellipse".

       

      So I tried other thing...

       

      At the draggable property of the "_filtroEscena5" I call the drag parameter and set this function :

       

       

      drag : sym.getSymbol("_escena5").getSymbol('_filtroEscena5').$('Ellipse').draggable({

       

       

                                                 start: function(e){},

                                                 drag: function(e,ui){},

       

                });

       

         }

       

      I do this to get the id of the Ellipse and then on the drop function of the Triggers i set this :

       

      drop:function(e,ui){

               if(ui.draggable.attr('id')=="Stage__escena5__filtroEscena5_Ellipse"){alert("es vini");

       

       

                   sym.getSymbol("_escena5").getSymbol('_filtroEscena5').$('Ellipse').draggable('destroy');

       

       

                                                 }

             }

       

      This made it responds only to the Ellipse element and then destroy the draggable property to make sure than when I drag it again I move all the symbol and not just the "Ellipse". And this is the problem with it, if I stop dragging the lantern at a trigger it works but if I stop it at any other place when I drag the Ellipse again it moves alone, the symbol does not move with it.

      So I call a function at the stop parameter at the .draggable property of "_filtroEscena5" and call again this:

       

          sym.getSymbol("_escena5").getSymbol('_filtroEscena5').$('Ellipse').draggable('destroy');

       

       

       

      All right now I move all the symbol only when I touch and drag the "Ellipse" and don´t care where I stopped it, when I drag it again it works. The problem? this broke the drop function for the triggers it´s like when you stop the drag and then ejecute the drop so when you stop the drag you lose the id information.

       

      I don´t know what more I can do I tried other things but nothing change because this is for tablets and can´t use the mouseover like on the browser.

       

      Plese some help my I spent a lot of time with it.

       

       

      Thanks again.

       

       

      Gabriel