jquery可拖動和可調整大小的遏制

Question

我正在嘗試使用jquery來重定義和拖動div。 但是這個實現看起來很麻煩。

我發現了幾個類似的問題，但沒有解決方案。

• In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?
• Resizing a JQuery Draggable element's containment parent while dragging

我試圖用幾個position配置，也嘗試了refreshPositions 選項，毫無效果。

的錯誤我的經驗：

• 當移動子項目迅速（特別是在圓圈移動時），它經常斷裂，並保持了遏制。
• 將孩子移動到右下角時，嘗試通過反覆拖動將孩子拖出角落，在每次迭代中，孩子會進一步中斷遏制
• 當遏制被打破時，在下一個拖動，你也可以拖入這個破碎的遏制區

我已經最小化了這個例子。
這在所有瀏覽器中都是可重現的，儘管小提琴似乎在IE 10和Opera中破解。

$(".child") 
    .draggable({ 
    containment: "parent", 
    cursor: "move" 
}).resizable({ 
    handles: "s,e", 
    containment: "parent", 
    minHeight: 50, 
    minWidth: 50 
}); 

查看這裏查看完整而簡單的例子。

http://jsfiddle.net/jxY8M/

我該如何解決這個問題，遏制？

Answer 1

這是，這個問題已經被報告here

你的情況該修補程序是（至少在最新的Chrome版本，我的工作），以

與UI可拖動本身有問題

1. 添加爲5px padding父，demo found here
2. 添加爲5px border父，demo found here
3. 添加爲5px margin孩子，demo found here
4. 混合上述任何一個5px的增加
5. 添加overflow:hidden父，demo found here。我不知道爲什麼這個工作正常，但它似乎完美地完成這項工作

5px的閾值可能只與該示例有關，爲了在您的實際情況下獲得正確的值。我看到的其他一些示例需要較少的填充或邊框寬度，我認爲它基於多大的元素，但我不確定。我在他們的例子中測試了第五種解決方案，並且它似乎也在那裏工作

Answer 2

您可以嘗試在可拖動交互中使用停止功能來更改可調整大小的參數。當我在設置可調整大小和拖動式交互的遏制時出現類似問題時，它對我有所幫助。

注意：這也適用於可調整大小的交互的鎖定高寬比。

樣品：

<div id="container" style="width: 320px; height: 240px; background-color: #000000;"> 
    <div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;"> 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 
jQuery(document).ready(function() { 
    jQuery("#subject").resizable(
    { 
     aspectRatio: 4/3, 
     minHeight: 120, 
     minWidth: 160, 
     maxHeight: 240, 
     maxWidth: 320 
    }).draggable(
    { 
     containment: "#container", 
     stop: function(evt, ui) { 
      var container = jQuery("#container"); 
      var subject = jQuery("#subject"); 

      var containerPosition = container.position(); 
      var subjectPosition = subject.position(); 

      var relativeLeft = subjectPosition.left - containerPosition.left; 
      var relativeTop = subjectPosition.top - containerPosition.top; 

      var maxWidth = (container.width() - relativeLeft) | 0; 
      var maxHeight = (container.height() - relativeTop) | 0; 

      subject.resizable("option", "maxWidth", maxWidth); 
      subject.resizable("option", "maxHeight", maxHeight); 
     } 
    }); 
}); 
</script> 

Answer 3

In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?是封閉的，但解決這一問題是：

添加position:relative到父/容器。

overflow:hidden並沒有爲我工作（在Firefox中，還沒有測試其他瀏覽器還）