在可調整大小的容器中使用可拖動元素的遏制問題

我認爲這很簡單，但在可調整大小的容器中放置可拖動元素時，似乎在jQuery UI中存在一些錯誤。在可調整大小的容器中使用可拖動元素的遏制問題

由於調整大小手柄（jsfiddle here）創建的額外高度，下面的代碼允許將可拖動元素稍微放在容器的外部。

HTML

<div class="container2"> 
    <div class="item2"></div> 
</div>

CSS

.container2 { 
    min-width:300px; 
    min-height:200px; 
    outline:1px solid black; 
} 
.item2 { 
    width:50px; 
    height:50px; 
    background-color:red; 
}

jQuery的

$(".container2").resizable(); 

$(".item2").draggable({ 
    containment: ".container2" 
}).resizable({ 
    containment: ".container2" 
});

所以我周圍這讓通過設置圍堵與使用容器的座標following code：

$(".item2").draggable({ 
    start: function (event, ui) { 
     var containmentX1 = $(".container2").offset().left; 
     var containmentY1 = $(".container2").offset().top; 
     var containmentX2 = ($(".container2").outerWidth() + $(".container2").offset().left - $(this).outerWidth()) 
     var containmentY2 = ($(".container2").outerHeight() + $(".container2").offset().top - $(this).outerHeight()) 
     $(this).draggable({ 
      containment: [containmentX1, containmentY1, containmentX2, containmentY2] 
     }); 
    }, 
}).resizable({ 
    containment: ".container2" 
});

這工作正常，除了一個問題...包容座標只設置第二次拖動元素被移動。

我用創建而不是開始繞過這個，但如果容器被調整大小，座標不會改變。

是否有辦法在首次拖動時將座標識別爲包容區域？

來源

2013-12-17 Tom

您可以將包含重新計算功能包裝到單獨的函數中，並在初始化draggable（創建時）以及每次容器獲取resi後調用它ZED（OM停止）

$(".container2").resizable({ 
stop: reCalcBounds 
}); 

$(".item2").draggable({ 
    create: reCalcBounds 
}).resizable({ 
    containment: ".container2"  
}); 

function reCalcBounds(){ 
var $item = $(".item2"); 
$container = $(".container2"); 
var containmentX1 = $container.offset().left; 
    var containmentY1 = $container.offset().top; 
    var containmentX2 = ($container.outerWidth() + $container.offset().left - $item.outerWidth()) 
    var containmentY2 = ($container.outerHeight() + $container.offset().top -$item.outerHeight()) 
    $item.draggable("option", "containment", [containmentX1, containmentY1, containmentX2, containmentY2]); 

}

看到更新fiddle

我想你也需要採取改變取決於拖動項目的位置可調整大小的容器的minWidth和minHeight的照顧，你可以使用「停止」對於那個可拖動的角度的回調

來源

2013-12-17 14:28:04 paulitto

如果按照你的方法，你可以調整大小「.container2' 和初始化時的樣子there

另一種解決方案可能是隻使用CSS時設置圍堵：

.container2 .ui-resizable-s 
{ 
    bottom:0; 
} 
.container2 .ui-resizable-e 
{ 
    right:0; 
}

您可以驗證there ，希望這有助於

來源

2013-12-17 14:23:18

在可調整大小的容器中使用可拖動元素的遏制問題

回答

相關問題