如何確保拖動的元素克隆保留原始寬度

我正在使用jQuery UI Draggable拖動其寬度計算爲佈局（margin:auto;）的一部分的<div>。如何確保拖動的元素克隆保留原始寬度

使用helper:clone拖動該元素時，該克隆也獲得margin:auto;樣式，但不再受原始容器的限制。

結果：克隆的<div>可能與原始寬度不同。

小提琴：http://jsfiddle.net/ericjohannsen/ajpVS/1/

我怎麼可能會導致克隆保留了原有的寬度是多少？

來源

2013-02-15 Eric J.

你只需要設置寬度和邊緣基於拖動對象的克隆元素上時，它被丟棄，使用$(ui.draggable).clone().css({ ... });

下面是你更新的小提琴，應該是你在找什麼。它也將保持助手對象的寬度。 http://jsfiddle.net/ajpVS/2/

來源

2013-02-15 01:05:21

我想我知道問題是什麼..那就是你有：

<div style="width:50px">

它也需要被納入objectDrag類：

<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>

我希望這就是你的意思！

編輯：

喜又過了快看 http://jsfiddle.net/He2KZ/1/

我用寬度：繼承財產繼承父母寬度不不管它是什麼規模。另外我注意到刪除邊界解決了這個問題。可拖動的克隆是2像素，你有一個1px的邊框。這是來自Jquery-ui IMO的有點兒車，他們至少應該考慮邊界。

如果您真的想要邊框，請嘗試使用「大綱」而不是「邊框」。這不會增加div的寬度。

來源

2013-02-15 00:30:50

不幸的是我不能那樣做。在我的真實代碼中，該列包含一堆可拖動的東西。更新小提琴來反映這一點。重點是被拖動的東西不會隱含知道它的大小，而只是由於佈局而獲得大小。 – 2013-02-15 00:32:36

+1編輯工作。喬恩的回答給了我稍微更大的靈活性，因此我接受了這一點，但你的表現也非常好。 – 2013-02-15 02:03:34

Jon的答案真的很好，但是當你在可拖動的元素中有子元素時，它不能正常工作。如果是這樣的話，在event.target可以代表您可拖動的孩子，你要修改的可拖動的helper()方法是這樣的：

$(".objectDrag").draggable({ 
    helper: function(e) { 
    var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable"); 
    return original.clone().css({ 
     width: original.width() // or outerWidth* 
    });     
    }, 
    ... 
});

Without this，助手將代表所有子元素中的拖動點擊（點擊例如在「Drag 1」框中的淺藍色區域內）。 Adding the additional logic above確保可拖動元素用於幫助程序。希望對有類似情況的人有所幫助！

* 注：你要使用如果原始元素有box-sizing: border-box應用（感謝@ jave.web籌集）。

來源

2013-07-10 10:00:26

我會爲此投票，但我不確定這個代碼應該放在哪裏，具體來說。這是否在拖動啓動事件？ – 2015-07-18 19:26:04

@cale_b您正在測試我對jQuery UI的記憶！我會更新我的答案，我相信我正在努力修復！ – 2015-07-19 10:08:34

我會建議使用'.outerWidth（）'和'.outerHeight（）'如果簡單''.width（）'/'.height（）'對你不利:) – 2016-03-30 08:41:27

如何確保拖動的元素克隆保留原始寬度

回答

相關問題