22 
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);

        }
    });

}

サイズ変更可能な行が取り出された場合、これは正常に機能しますが、これらの画像をドラッグおよびサイズ変更可能にしたいのですが、同じ要素に両方の属性を持たせようとすると、おかしな動作が発生します。誰かがこれを機能させる方法を知っていますか?

ありがとう！

4

6 に答える 6

47

jqueryui<img>が でラップし<div>、イメージのドラッグ可能なコンポーネントがラップ内で発生するため<div>です。

<img>を a でラップしてみてください<div>(スタイル化されている場合display:inline-block、x 軸と y 軸の両方で画像のサイズを「抱きしめる」)、<div>ドラッグ可能にします (したがって、囲まれた<img>ものも同様になります)、<img>サイズ変更可能にします (div画像を抱きしめ、すべてがうまく収まります）。

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

于 2011-02-09T18:47:11.817 に答える
10

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

.element {
  position: absolute !important;
}
于 2013-01-02T17:04:07.050 に答える
6

私が興味を持っていたのは、ドラッグ可能でサイズ変更可能な作業コードです。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:""} を使用することをお勧めします。ドラッグされているアイテムに関連する「ヘルパー」オブジェクト。

 $('#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();
于 2011-02-09T18:58:45.023 に答える
1

最初にサイズ変更可能を適用すると、ドラッグ可能を 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") });
于 2012-08-07T15:11:50.193 に答える
0

これを担当するコードは、別の回避策でした。 "> Bug 1749を指す Github リンク。

// 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 });
}

修正自体は最初から存在します：

// 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 回だけ更新されました:

// 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リンク

于 2015-12-30T11:33:37.007 に答える