jQuery的Constrain是一個非常有用的插件，它允許您限制元素的移動范圍，以便它們不會超出指定的區(qū)域。這個插件特別適用于拖拽元素這類互動的場景。

$(function(){
$(".drag").draggable({ containment: "parent" });
});

在上面的代碼中，我們首先通過jQuery選擇器選擇了一個樣式為“drag”的元素，然后通過調(diào)用draggable()方法將它化為可拖拽的元素。這個方法中，我們設(shè)置了一個屬性“containment”，意為限制，將其值設(shè)置為"parent"，表示只能在父元素層級內(nèi)拖拽，出界后無法繼續(xù)拖拽。

$(function(){
$(".drag").draggable({ 
containment: "parent", 
scroll: false 
});
});

當(dāng)然，你還可以通過添加scroll屬性將父元素滾動屏幕關(guān)閉，這樣拖拽的時候更方便。

$(function(){
$(".drag").draggable({ 
containment: [10, 10, 200, 200] 
});
});

另外，我們還可以使用一個數(shù)組來定義限制區(qū)域的范圍，此時數(shù)組分別代表了上下左右的限制值。

Constrain是一個高度靈活、易于使用的jQuery插件。您只需將其添加到頁面中，隨后在JavaScript中通過相應(yīng)的命令調(diào)用，即可實現(xiàn)對元素移動的限制效果。