7

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

を使用してその要素をドラッグするhelper:cloneと、クローンもmargin:auto;スタイルを取得しますが、元のコンテナによる制約はなくなります。

結果：複製され<div>たものの幅が元の幅と異なる場合があります。

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

クローンに元の幅を保持させるにはどうすればよいですか？

4

3 に答える 3

17

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*
    });                
  },
  ...
});

これがないと、ヘルパーはドラッグ可能な範囲内でクリックされた子要素を表します（たとえば、[ドラッグ1]ボックスの水色の領域内をクリックします）。上記の追加ロジックを追加すると、ドラッグ可能な要素がヘルパーに使用されるようになります。それが同じような状況の誰にとっても役立つことを願っています！

*注outerWidth：元の要素が適用されている場合に使用することをお勧めしますbox-sizing: border-box（レイズしてくれた@ jav.webに感謝します）。

于 2013-07-10T10:00:26.047 に答える
7

ドロップ時にドラッグ可能なオブジェクトに基づいて、複製された要素の幅とマージンを設定する必要があります。$(ui.draggable).clone().css({ ... });

これがあなたのための更新されたフィドルです、あなたが探しているものでなければなりません。また、ヘルパーオブジェクトの幅も保持されます。http://jsfiddle.net/ajpVS/2/

于 2013-02-15T01:05:21.393 に答える
1

私は問題が何であるかを知っていると思います..あなたが持っている場所：

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

width：inheritプロパティを使用して、サイズに関係なく親の幅を継承しました。また、境界線を削除すると問題が解決したことに気付きました。ドラッグ可能なクローンは2pxで、境界線は1pxです。これはJquery-uiIMOからのちょっとバグがあり、少なくとも境界線を考慮する必要があります。

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

于 2013-02-15T00:30:50.710 に答える