ドラッグされた要素のクローンがオリジナルの幅を保持する方法

Question

jQuery UI Draggableを使用して、幅がレイアウトの一部として計算される<div>をドラッグしています（margin:auto;）。

helper:cloneを使用してその要素をドラッグすると、クローンもmargin:auto;スタイルになりますが、もはや元のコンテナに拘束されません。

結果：複製された<div>は、オリジナルとは異なる幅を持つ場合があります。

フィドル：http://jsfiddle.net/ericjohannsen/ajpVS/1/

がどのように私は、元の幅を保持するクローンを引き起こす可能性がありますか？

Answer 1

あなたはちょうどあなたが探しているものである必要があり、それがドロップされたときに

$(ui.draggable).clone().css({ ... });は、ここにあなたのための更新フィドルだ使用して、ドラッグ可能なオブジェクトに基づいてクローン化された要素に幅とマージンを設定する必要があります。また、ヘルパーオブジェクトの幅も保持します。 http://jsfiddle.net/ajpVS/2/

Answer 2

私はあなたが持っているところ..私は問題が何であるかを知っていると思う：

<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> 

私はあなたが何を意味するのかthatsのを願っています！

EDIT：関係なく、それがどのようなサイズ幅ない親を継承するプロパティを継承します。

こんにちは、私は幅を使用し、別の簡単に見 http://jsfiddle.net/He2KZ/1/

を取りました。また、国境を外して問題を解決したことに気づいた。ドラッグ可能なクローンは2pxです。境界は1pxです。これはJquery-ui IMOからちょっとしたバグですが、彼らは少なくとも境界線を考慮する必要があります。

境界線が本当に必要な場合は、「境界線」ではなく「アウトライン」を使用してみてください。これはdivの幅に追加されません。

Answer 3

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を、ヘルパーは、任意の子要素をドラッグ中にクリック表します（クリックしてください例えば「ドラッグ1」ボックス内の薄い青色の領域内で）。 Adding the additional logic aboveは、ドラッグ可能な要素がヘルパーに使用されることを保証します。似たような状況にある人に役立つことを願っています！

---

* 注意：あなたは元の要素がbox-sizing: border-box（上げるための@ jave.webのおかげで）適用した場合​​を使用したいと思います。