縮放div不可拖動所有的父div

我目前正在使用jquery-ui在一個項目中，我有一個大的div包含幾個孩子。這個想法是，這些孩子div先前已經由用戶創建，然後縮小（約爲其原始大小的20％）並放置在大型div中，其中用戶可以按照他們的喜好來安排它們。縮放div不可拖動所有的父div

我的問題是，縮放後，我無法將子div拖到父級中的所有位置。相反，它們似乎受限於父級的縮小版本，即使沒有對父級應用縮放轉換。

這個小提琴說明了這個問題：http://jsfiddle.net/yRNqu/（嘗試拖動藍框的最右邊或底部）

有其他人遇到這個問題？我真的很感激一兩個指針。

感謝

HTML：

<html> 
    <div class="container"> 
     <div class="box"></div> 
    </div> 
</html>

CSS：

.container{ 
    height:500px; 
    width: 500px; 
    background-color: red; 

} 
.box{ 
    height:100px; 
    width: 100px; 
    background-color: blue; 
    -webkit-transform-origin: top left; 
    -moz-transform-origin: top left; 
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5); 
}

JQ 1.9 + JQ UI：

$(function() { 
    $('.box').draggable({ 
     containment: 'parent' 
    }); 
});

來源

2013-02-10 Adam Sheppard

JQuery UI不夠聰明，可以使用CSS縮放和旋轉，因爲它依賴於報告的邊界框，這在上下文中變得毫無意義。

這裏有一幫解決方法嘗試另一個SO問題：Dragging & Resizing CSS Transformed Elements

幾個答案下來，你可以找到一個據說可以直接解決這個問題的一個插件。

來源

2013-02-10 04:26:55 Plynx

是的。 '$（'。box'）.width（）'不管比例因子如何報告100。 – 2013-02-10 04:30:27

看起來很有前途，我會試試看。謝謝！ – 2013-02-10 13:59:13

This has been filed in the jQuery bug tracker，但它被封閉，不會有3個月前修復：

我們在會議上討論了這一點，並CSS變換是不是我們計劃在可預見的功能隨時配套的東西[原文如此]，所以關閉這個wontfix。

來源

2013-02-10 04:32:42

縮放div不可拖動所有的父div

回答

相關問題