Mootools - Combinare due eventi

[teakor81]

Ciao a tutti.

Vorrei poter combinare in un <div> l'evento Resize e l'evento Drag, non contemporanemante, ma tipo quando si preme un pulsante si attiva il Resize e quando se ne preme un altro si disattiva Resize e si attiva Drag.

Questo è il codice js:

window.addEvent('domready', function(){ 

   $('Drag').addEvent('click', function(){ 
                            
      var container = $('containment'); 
                                
      new Drag.Move('dragger', {'container': container}); 

   }); 


   $('Resize').addEvent('click', function(){ 
                            
      $('dragger').makeResizable({limit: {x: [50, 1200], y: [50, 600]}}); 

   }); 

});

e questo è il codice HTML:

<form id="form1" name="form1" method="post" action="index.html"> 
   <input name="Drag" id="Drag" type="button" value="Drag" /> 
   <input name="Resize" id="Resize" type="button" value="Resize" /> 

<div id="containment"> 

        <div id="dragger"> 
          <div id="head_div1">Div1: </div> 
                <div> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
              
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
        </div> 
</div> 
</form>

Il problema è: per esempio premo Drag e mi fa tranquillamente spostare l'elemento <div>, ma quando premo Resize mi mantiene l'evento Drag attivo, quindi mentre cerco di ridimensionare il <div> me lo sposta anche.

Come posso fare per far si che alla pressione di Drag mi annulli l'evento Resize e alla pressione di Resize mi annulli l'evento Drag?

Ho provato di tutto: Event.Stop; removeEvent;... ma purtroppo nessun risultato.

Grazie a tutti dell'aiuto.

[artorius]

Mi sa che dovresti leggerti un pelo la documentazione ufficiale prima di usarlo: devi usare il metodo detach() sull'oggetto che l'istanziazione ha ritornato:

http://mootools.net/docs/more/Drag/Drag#Drag:detach

io ti consiglio di fare una cosa un pelo più Object Oriented:

window.addEvent('domready', function(){ 
   var dragIstance = null, resizeIstance = null;

   $('Drag').addEvent('click', function(){ 
      if(!$chk(dragIstance)){        
           var container = $('containment');  
           dragIstance = new Drag.Move('dragger', {'container': container}); 
      }else{
           dragIstance.attach();
      }

      if($chk(resizeIstance)){resizeIstance.detach();}

   }); 


   $('Resize').addEvent('click', function(){ 
      if(!$chk(resizeIstance)){
           resizeIstance = $('dragger').makeResizable({limit: {x: [50, 1200], y: [50, 600]}}); 
      }else{
           resizeIstance.attach();
      }
      
      if($chk(dragIstance)){dragIstance.detach();}
   }); 

});