jQuery的可拖動和resizable

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

     } 
    }); 

}

如果可調整大小的線取出這工作得很好，但我希望這些圖像可拖動和調整大小，我得到可笑的行爲，如果我嘗試做相同的元素有兩個屬性，沒有任何人知道一種方法來完成這項工作？jQuery的可拖動和resizable

謝謝！

來源

2011-02-09 Tom Gullen

看起來像是因爲你在<img>上這樣做，jqueryui將其包裝在<div>中，然後圖像的可拖動組件會在包裝<div>內發生。

嘗試包裹在一個<div>的<img>（其中，如果風格display:inline-block，將「擁抱」在x軸和y軸的圖像的尺寸），使<div>拖動（並因此封閉<img>會隨着孔），並使<img>可調整大小（並且由於div擁抱圖像，所有座標都很好）。

工作示例：這裏http://jsfiddle.net/vrUgs/2/

來源

2011-02-09 18:47:11 davin

謝謝達文。這有點複雜，雖然因爲圖像被配置了很多函數並且有load（）函數，這使得事情變得更加困難，但是您的答案+工作示例對我來說已經足夠了:) – 2011-02-10 11:45:33

這是簡要的答案我正在尋找。在幾個谷歌頁面後，我碰到這個答案。謝謝！！ – 2013-11-11 23:12:31

我很好奇，是工作的代碼可拖動和可調整大小。 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工作。

首先，被拖動的所有'draggables'都會獲得'.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();

來源

2011-02-09 18:58:45 DefyGravity

@達文肯定需要在圖像前添加div。我能夠重現問題，試圖調整大小和拖動一個裸的 – DefyGravity 2011-02-09 19:20:33

如果先應用可調整大小，則可以將可拖動的元素應用到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-07 15:11:50 TrailTrackers

可調整大小和可拖動導致各種DOM轉移問題給我。有一個bug filed for this behavior;臨時解決方法是應用下列CSS，這爲我工作：

.element { 
    position: absolute !important; 
}

來源

2013-01-02 17:04:07 subelsky

每一個問題：Resizable, draggable object in jquery. Possible?如果你只是包括jQuery的ui.css它會奏效。它解決了我的問題，當這些都沒有。我的代碼很簡單：

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

這是可拖動的，但不能調整大小。沒有別的工作。添加CSS允許調整大小沒有額外的div或代碼。

來源

2013-06-07 18:38:41

-1

draggable將css上的位置設置爲相對，並將可調整大小設置爲絕對... 至少這是我設置爲可拖動和可調整大小的div的「有趣行爲」。當我改變另一個div的位置時窗口...

所以我強迫CSS設置位置：絕對在每個移動事件（拖動和調整大小），一切都很好！

來源

2014-05-19 19:01:47 lucasumberto

負責此問題的代碼是其他方法的替代方法：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 }); 
}

的自我修復，因爲剛開始的時候存在：Github Bug Fixed link for Jquery

// 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年前：Updated 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

來源

2015-12-30 11:33:37

jQuery的可拖動和resizable

回答

相關問題