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.

$(document).ready(function(){        
    $(document).mousemove(function(e){           
        $('#spnCursor').html(e.pageX + "-" + e.pageY);        
    });
});

var i = $('#inner');
var o = $('#outer');
var x = 0;
var y = 0;
var offset = o.offset();
$('#inner').html(i.position().top+' - '+i.position().left);
i.draggable({
    drag: function(ui, event) {
        var position = i.position();
        
        i.html(position.left+' - '+position.top);
        if (position.top <= 1-(i.height()-o.height())) {   
            i.css('background', 'red');
        }
        else if (position.left >= -1) {          
             i.css('background', 'gray');
        }
        else if (position.left <= o.width()-i.width()+1) {

             i.css('background', 'green');
        }
        else if (position.top >= -1) {
 
              i.css('background', 'cyan');
        }                    
    },
    start: function () {
        var offset = o.offset();
        i.draggable('option', 'containment', [offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top]);
    },
    containment: [offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top]
});
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!