ugrás a tartalomhoz

Div drag stop és restart

mahoo · 2012. Már. 22. (Cs), 23.00
Sziasztok! Próbálgatok egy kódot: http://jsfiddle.net/evunh/61/ ami eddig azt tudja, hogy ha a belső nagyobb div belső széle eléri a kisebb div külső szélét, akkor megváltozik a nagyobb div színe, mert elérte az elméleti határát.

Amit szeretnék még elérni, hogy a fenti esetekben ne lehessen tovább mozgatni a nagyobb divet csak akkor ha már az ellentétes irányba mozgatnám a divet.

Meg lehet oldani ezt a feladatot szimplan drag eseményekkel vagy figyelni kell a kurzor poziját és mozgását?!

Köszönöm!
‹ Scrollozható IFRAME scrollbar nélkül javascriptel. lehetséges a szülő div 100%-os kitöltése? ›
 ■
1

containment

Poetro · 2012. Már. 23. (P), 00.01
A jQuery UI eleve rendelkezik ezzel a képességgel, containment tulajdonságot, amiben megadhatod, mekkora területen mozoghasson. Csináltam még jó pár módosítást a kódon, de még igényelne jó pár tisztítást.
  1. $(document).ready(function(){          
  2.     $(document).mousemove(function(e){             
  3.         $('#spnCursor').html(e.pageX + "-" + e.pageY);          
  4.     });  
  5. });  
  6.   
  7. var i = $('#inner');  
  8. var o = $('#outer');  
  9. var x = 0;  
  10. var y = 0;  
  11. var offset = o.offset();  
  12. $('#inner').html(i.position().top+' - '+i.position().left);  
  13. i.draggable({  
  14.     drag: function(ui, event) {  
  15.         var position = i.position();  
  16.           
  17.         i.html(position.left+' - '+position.top);  
  18.         if (position.top <= 1-(i.height()-o.height())) {     
  19.             i.css('background', 'red');  
  20.         }  
  21.         else if (position.left >= -1) {            
  22.              i.css('background', 'gray');  
  23.         }  
  24.         else if (position.left <= o.width()-i.width()+1) {  
  25.   
  26.              i.css('background', 'green');  
  27.         }  
  28.         else if (position.top >= -1) {  
  29.    
  30.               i.css('background', 'cyan');  
  31.         }                      
  32.     },  
  33.     start: function () {  
  34.         var offset = o.offset();  
  35.         i.draggable('option', 'containment', [offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top]);  
  36.     },  
  37.     containment: [offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top]  
  38. });  
2

Köszönöm Poetro, erre

mahoo · 2012. Már. 23. (P), 08.20
Köszönöm Poetro, erre gondoltam!

Láttam, hogy van containment képesség, de nem tudtam jól paraméterezni, mert alapból ezzel szerettem volna megoldani. De most már látom, hogyan kell, köszönöm!