web-dev-qa-db-ja.com

jqueryドラッグ可能かつサイズ変更可能

function makeResourceDrag(arrIndexID) {

    $('#imgA' + arrIndexID).resizable();

    $('#imgA' + arrIndexID).draggable({
        start: function(event, ui) {
            isDraggingMedia = true;
        },
        stop: function(event, ui) {
            isDraggingMedia = false;

            // Set new x and y
            resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left / currentScale);
            resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top / currentScale);

        }
    });

}

これは、サイズ変更可能な線が出ていれば問題なく機能しますが、これらの画像をドラッグおよびサイズ変更できるようにしたいのですが、同じ要素に両方の属性を設定しようとすると、面白い動作が得られます。

ありがとう！

jqueryjquery-ui-resizablejquery-ui-draggable
22
Tom Gullen

それは、jQueryuiが<img>でラップする<div>でそれを行っているためであるように見えます。その後、画像のドラッグ可能なコンポーネントがラップ<div>内で発生します。

<img>を<div>にラップしてみてください（スタイルがdisplay:inline-blockの場合、x軸とy軸の両方で画像のサイズが "大きくなります"）、<div>をドラッグ可能にします（したがって、囲まれた<img>も同様になります）、<img>をサイズ変更可能にします（divが画像をハグするため、すべて適切に配置されます）。

作業例： http://jsfiddle.net/vrUgs/2/

43
davin

サイズ変更やドラッグが可能なため、あらゆる種類のDOMシフトの問題が発生していました。 この動作について提出されたバグ ;があります。一時的な修正は、次のCSSを適用することです。

.element {
  position: absolute !important;
}
9
subelsky

気になったのは、ドラッグとサイズ変更が可能な作業コードです。 jQuery：

jQuery(document).ready(function(event){
   jQuery(".img").draggable().find("img").resizable();
});

html：

<div class="img">
  <img alt="" src="images/hard-disk-fingerprint.jpg"/>
</div>

jSの変更に関連する作業がわからないので、他のことに気づきました。

最初に、ドラッグされているすべての「ドラッグ可能オブジェクト」は「.ui-draggable-dragging」のクラスを取得します。これは、「isDraggingMedia」ロジックに使用できる可能性があります。

次に、現在の位置を正確に取得するには、ui.offset {top： ""、left： ""}を使用することをお勧めします。可能であれば、ui.position {top： ""、left： ""}の位置を変更して、ドラッグされているアイテムに関連する「ヘルパー」オブジェクト。

 $('#div holding imgA+arrindexid').draggable({stop:function(event, ui){
//isDraggingMedia = true;  
//replace this with a $().is(ui-draggable-dragging) check if possible where it matters in //your other javascript.
                  // Set new x and y
                    resourceData[arrIndexID][4] = Math.round(ui.offset.left / currentScale);
                    resourceData[arrIndexID][5] = Math.round(ui.offset.top / currentScale);
    }}).find('img').resizable();
4
DefyGravity

この質問ごとに： jqueryのサイズ変更可能でドラッグ可能なオブジェクト。可能ですか？ jquery-ui.cssを単純に含めれば機能します。これらのどれもが解決しないとき、それは私の問題を解決しました。私のコードは単純です：

$(element).resizable().draggable();

これはドラッグ可能でしたが、サイズ変更はできませんでした。他には何もうまくいきませんでした。 CSSを追加すると、余分なdivやコードなしでサイズを変更できます。

3
Devil's Advocate

最初にサイズ変更可能オブジェクトを適用すると、ドラッグ可能オブジェクトをimgの親に適用できます。これは、サイズ変更可能を適用して作成された新しいdivです。

chartImg.resizable({ animate: true,
            ghost: true,
            handles: 'n,s,e,w,ne,se,nw,sw',
            start: function (event, ui) { startResize(event, ui); },
            resize: function (event, ui) { monitorResize(event, ui); },
            stop: function (event, ui) { stopResize(event, ui); }
        }).parent().draggable({ containment: $(".chartPane") });
1
TrailTrackers

これを担当するコードは、何か別の回避策でした： Github link これは Bug 1749 を指します。

// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
    el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
}

修正自体は当初から存在しています： JqueryのGithubバグ修正リンク

// bugfix #1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {

    // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
    var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
    var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ? o.documentScroll.left : 0;

    el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
}

7年前に1回だけ更新されました： pdated Link

// bugfix #1749
        // bugfix for http://dev.jquery.com/ticket/1749
        if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
            // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
            var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
            var dscrollt = sOffset ? this.documentScroll.top : 0, dscrolll = sOffset ? this.documentScroll.left : 0;

            el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
            el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
        }

リファレンス： jquery link

0
rhitz