DIV與邊界調整dragend

我有一個容器與幾個可拖動和可調整大小的塊。因爲我希望能夠向用戶顯示哪個塊處於「活動」狀態，所以我添加了類active，它添加了一個邊框。DIV與邊界調整dragend

現在的問題是，當我拖動塊並將其放在容器中幾次div變得越來越大時。當然哪個不太實際。

當我從active類中刪除樣式時，不會發生這種情況，所以這與正在添加的邊框有關。當選中某個塊時，此類將從所有塊中移除。

請注意，必須爲此項目設置width和height。

我已經創建了一個小演示，並添加了一個小提琴，它顯示了問題。 Fiddle

只需拖動其中一個塊幾次。有人可以向我解釋爲什麼會發生這種情況以及如何解決它？

來源

2016-04-14 Jasper Vergers

就在'setDimensions'的開頭添加這行代碼：'$（OBJ）.removeClass（ '主動'）;' – Hackerman

作爲@Titus陳述的問題是，height和width被錯誤地計算的，其中它也增加了border的width下降。

因爲它是重要的，無論width和height需要爲這個項目上的這些元素我用jQuerys innerWidth()和innerHeight()函數來計算元素的width和height無邊框進行設置。

由於存在邊界，我還需要在計算中刪除此數字。下面的代碼解決了我的問題。

function setDimensions(obj) { 
    obj.css('position', 'absolute'); 
    obj.css("left",parseInt(obj.css("left"))/($container.width()/100)+"%"); 
    obj.css("top",parseInt(obj.css("top"))/($container.height()/100)+"%"); 
    obj.width(((obj.innerWidth() - obj.css('borderWidth'))/$container.width()) * 100 + '%'); 
    obj.height(((obj.innerHeight() - obj.css('borderWidth'))/$container.height()) * 100 + '%'); 
}

來源

2016-04-14 13:47:10

不要設置width和height上落：

function setDimensions(obj) { 

    obj.css('position', 'absolute'); 
    obj.css("left",parseInt(obj.css("left"))/($container.width()/100)+"%"); 
    obj.css("top",parseInt(obj.css("top"))/($container.height()/100)+"%"); 
    //obj.width((obj.width()/$container.width()) * 100 + '%'); 
    //obj.height((obj.height()/$container.height()) * 100 + '%'); 
    }

Updated Fiddle

只要你知道，你在那裏，如果你調整一個塊的其他的問題，無論是width和height變化也。您可能需要使用resizable的start()函數保存該塊的初始width和height，然後將這些尺寸與stop()函數中的最終尺寸進行比較，並僅更新width或height。

（除非，當然，調整大小是預期的行爲）

來源

2016-04-14 13:31:44

感謝您對大小調整提示。關於下降，我忘了在提問中提到設置'width'和'height'很重要。我通過使用innerWidth（）和innerHeight（）來計算出正確的大小。除了你的答案+1。 –

DIV與邊界調整dragend

回答

相關問題