Wie kann ich verhindern, dass ein ziehbares Gerät den Bildschirm verlässt?

Question

Ich bin derzeit mit diesen Code, die wunderbar funktioniert:

$(document).ready(function() { 
    if ($.cookie("cvispos") != undefined) { 
     var unwrapped = window.JSON.parse($.cookie("cvispos")); 
     var left = window.JSON.parse($.cookie("cvispos")).left; 
     var top = window.JSON.parse($.cookie("cvispos")).top; 
     $("#cguts").css("left", left + "px"); 
     $("#cguts").css("top", top + "px"); 
    } 
}); 

// Buncha cookie stuff and onclick trash... 

$("#cguts").draggable({ 
    stop: function (event, ui) { 
     $.cookie("cvispos", window.JSON.stringify(ui.position)); 
    } 

Das Problem, das ich habe ist, dass wenn Sie die Box zu weit nach oben oder unten ziehen, können Sie den Bildschirm ganz ohne die Fähigkeit, sich bewegen off um es zurück zu bewegen. Gibt es eine Möglichkeit, es davon abzuhalten, sich außerhalb des Aussichtspunkts zu bewegen? Ich habe versucht, Snap zu verwenden, aber ich konnte es nicht zur Arbeit bringen. Ich konnte es erreichen, indem ich ein Minimum/Maximum für die Positionierung einstellte, konnte aber keine Ressourcen finden, die mich zu der Annahme brachten, dass es mit diesem Code möglich ist.

Answer 1

Sie können den Parameter containment des ziehbaren Objekts auf window setzen, um seine Bewegung auf sichtbare Grenzen zu beschränken.

Beachten Sie auch, dass Sie Ihren Code optimieren können, indem Sie den JSON nur einmal deserialisieren und beide Eigenschaften in einem einzigen Aufruf festlegen. Versuchen Sie dies:

$(document).ready(function() { 
    if ($.cookie("cvispos") != undefined) { 
     var cookieData = JSON.parse($.cookie("cvispos")); 
     $("#cguts").css({ 
      left: cookieData.left + "px", 
      top: cookieData.top + "px" 
     }); 
    } 
}); 

// Buncha cookie stuff and onclick trash... 

$("#cguts").draggable({ 
    containment: 'window', 
    stop: function (event, ui) { 
     $.cookie("cvispos", JSON.stringify(ui.position)); 
    } 
});