어떻게하면 스크린에서 나가는 것을 멈출 수 있습니까?

Question

나는 현재 훌륭하게 작동이 코드를 사용하고 있습니다 :

$(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)); 
    } 

난 데 문제는 당신이 지금까지 위 또는 아래에있는 상자를 드래그하면, 당신은 능력없이 전체 화면 떨어져 그것을 이동할 수 있다는 것입니다 그것을 뒤로 옮기십시오. 관점에서 벗어나지 못하게하는 방법이 있습니까? 스냅을 사용해 보았지만 작동시키지 못했습니다. 나는 포지셔닝에 최소/최대를 설정함으로써 이룰 수 있었지만,이 코드로 가능하다고 믿을만한 자원을 찾을 수 없었습니다.

Answer 1

draboxable의 containment 매개 변수를 window으로 설정하여 이동 범위를 표시 범위 내로 제한 할 수 있습니다.

한 번만 JSON을 비 직렬화하고 css() 속성을 모두 설정하여 코드를 최적화 할 수 있습니다. 시도해보십시오.

$(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)); 
    } 
});