jquery ui osi przeciągany ograniczeniem ina xi podane współrzędne

Question

mam

<style> 
.container { position:relative; width:600px; height:400px; overflow:hidden; } 

.div-inner { position:absolute; top:0px; left:0px; width:7200px; cursor:e-resize; } 

</style> 

$ ("div wewnętrzny"). Przeciągany ({osi: "X"}.);

<div class="container"> 
    <div class="div-inner">Drag me!</div> 
    </div> 

Chcę ograniczyć ruch w lewo i na prawo od 7200 pikseli szerokości div wewnętrznej.

jeśli był przewijalnym elementem, to pozwoliłbym mu przewinąć od lewej: 0px; w lewo: (7200-600) px;

Jak mogę to zrobić za pomocą przeciągania?

Dziękuję bardzo!

Answer 1

znalazłem rozwiązanie:

$(".div-inner").draggable({ axis: "x", 

    stop: function(event, ui) { 
     if(ui.position.left>0) 
     { 
     //alert('Return back'); 
     $(".div-inner").animate({"left": "0px"}, 600); 
     } 
     else if(ui.position.left<-6800) 
     { 
      $(".div-inner").animate({"left": "-6400px"}, 600); 
     }             
    } 

Answer 2

Istnieje kilka przykładów ograniczonego ruchu dostępne w dokumentacji jQuery UI: http://jqueryui.com/demos/draggable/constrain-movement.html

$(function() { 
    $("#draggable").draggable({ axis: "y" }); 
    $("#draggable2").draggable({ axis: "x" }); 

    $("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false }); 
    $("#draggable4").draggable({ containment: "#demo-frame" }); 
    $("#draggable5").draggable({ containment: "parent" }); 
}); 

Można oba zawierają draggables na 'rodzic', 'dokument', 'okna', [x1, y1, x2 , y2], element lub selektor. Można dodatkowo zezwolić na ruch osi x lub y.