不要拖過窗邊

我有兩個div重疊在一起。。第二個是.first。每個寬度和高度都是完整的窗口。不要拖過窗邊

。第二有 position: absolute; left: -800px; 這樣的屬性，您可以單擊其中的一部分，以它拖到。首先

我想拖動功能，防止。第二超越的右邊緣框架和/或進一步超過-800px左。

2016-12-13 cfocket

你能提供你的代碼？您是否使用JQuery UI可拖動小部件進行拖動？ – Slonski

如果你使用jQuery UI來使元素可拖動，你應該看看參數「containment」，它允許你設置一個邊界框來拖動是有限的http://api.jqueryui.com/draggable/#option -containment – Flyer53

事實上，我使用jQuery API來獲取抓取效果，但我並不真正瞭解包含選項。這裏是工作空間的鏈接http://clementfauquet.com/test/port_clem/ – cfocket

這裏是一個例子，如何使用jquery ui的包含選項拖動數組。該數組需要4個數字，前兩個數字定義邊界框的左上角，最後2個數字定義邊界框的右下角。

因此，在下面的示例中，元素左側的最小css爲0px，左側的最大css爲400px。最低css頂部是10px，最高css頂部是200px。

基本上你只需要根據需要調整數組中的值。

var index1 = 10; 
 

 
$('#test').draggable({ 
 
    containment: [0, index1, $('body').width()/4, 200] 
 
}); 
 

 
// update option containment after a window resize 
 
$(window).resize(function() { 
 
    $("#test").draggable("option", "containment", "parent"); 
 
});

body{ 
 
height: 350px; 
 
} 
 

 
#test{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 2px solid #000; 
 
    background: gray; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="test"></div>

來源

2016-12-14 07:43:09 Flyer53

非常感謝，這是訣竅;）儘管如此，由於我的最小剩餘價值是負值，我在調整大小時遇到問題。我該如何設置一個響應值，如'calc（100％ - 100px）;'？ – cfocket

正如您在更新示例中所看到的，您可以使用變量以及計算包含數組中所需值的表達式。在窗口調整大小後，您可以按照示例中所示更新包含值。只需使用符合您需求的值即可。注意：該示例不會更新SO上的遏制，因爲代碼運行的iframe不會調整大小。 – Flyer53

在完整頁面中運行示例，窗口調整大小的更新也將工作。 – Flyer53

不要拖過窗邊

回答

相關問題