Draggable - 如何抑制可拖動元素超過屏幕底部？

我有一個只能通過Y軸拖動的元素。我希望它能夠越過屏幕的頂部（它可以），但是禁止它從屏幕底部經過。我閱讀了一個關於遏制的jQuery Draggable API，但是對於我所問的問題沒有找到答案，或者至少無法理解如何將其應用於我的案例。這裏是我到目前爲止的代碼：Draggable - 如何抑制可拖動元素超過屏幕底部？

的JavaScript：

$(document).ready(function() { 
    $("#elem").draggable({ 
     axis: "y" 
    }); 
});

來源

2012-12-01 ModernDesigner

http://jqueryui.com/draggable/#constrain-movement – lostsource

是的，我知道這一點，這就是我找到了剋制，以Y軸。我想知道如何讓它離開屏幕的頂部，但不是底部。 – ModernDesigner

必須有更好的方式，但;

$(document).ready(function() { 
    $("#elem").draggable({ 
     axis: "y", 
     drag: function(event, ui) { 
      if($(this).offset().top + $(this).outerHeight() > $(window).height()) { 
       $(this).offset({"top": $(window).height() - $(this).outerHeight()}); 
       event.preventDefault(); 
      } 
     } 
    }); 
});

來源

2012-12-01 18:45:48

是的，這個工程！謝謝！ :-) – ModernDesigner

您需要設置圍堵選項的東西，是在頁面的高度。

$(document).ready(function() { 
    $("#elem").draggable({ 
     containment: "document", 
     scroll: false, 
     axis: "y" 
    }); 
});

來源

2012-12-01 18:16:00 arhea

這樣可以防止它按照文檔的遏制拖拽屏幕的高度。意味着它不會超過頂部或底部。我希望它通過頂部，而不是底部。主要的Déjàvu。 – ModernDesigner

Draggable - 如何抑制可拖動元素超過屏幕底部？

回答

相關問題