JQuery-UI Draggable：拖動的元素大小

我想要做以下事情：我有一個頁面上的圖標，當我把它拖動圖標的變化。它不得超出收容區域。JQuery-UI Draggable：拖動的元素大小

我已經試過是這樣的：

$("#myElement").draggalble({ 
    containment: "#myContainer", 
    start: function(event, ui) { 
     $(this).attr("width", "20"); 
     $(this).attr("height", "20"); 
     $(this).attr("src", "newSource.png"); 
    } 
});

圖標成功改變了，我可以拖動它。唯一的問題是新的圖標大小。它比原來的要小一些。當我將它拖到容器邊界附近時，它太早停止，我無法到達容器邊界。具體來說，我無法達到上限和右邊界，但我仍然可以到達底部和左側。我認爲這是因爲可拖動的插件使用舊圖標的大小來計算圖標限制。

有沒有人有關於如何拖動新圖標並達到容器邊界的建議？

感謝提前:)

來源

2012-12-17 giocarmine

如果圖像尺寸相同，您可以使用CSS設置尺寸並移除'$（this）.attr（'size'，'X'）;'。 – qwerty

感謝您的支持。第二張圖像稍小。我試過你的建議，但使用.css而不是.attr不會改變任何東西。 – giocarmine

我的意思是你可以在你的實際CSS文件中設置大小，而不是用javascript。這樣，兩個圖像的大小將保持不變，無需使用javascript更改大小。 – qwerty

爲了得到這個工作，我不得不創建一個基於較小的圖片的尺寸的容器對象。

使用下列選項 - 參數分別是div容器，小圖片寬度和小圖片高度：

containment: shrinkSize("#container",20,20),

和功能執行以下操作：

function shrinkSize(frameId, smallerWidth, smallerHeight) { 
    var frameOffset = $(frameId).offset(), 
     frameHeight = $(frameId).height()-smallerWidth, 
     frameWidth = $(frameId).width()-smallerHeight; 

    return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]); 
}

Fiddle here。

P.S.在小提琴中，被拖動的圖像在丟棄時恢復爲原始大小。如果這不是預期行爲，只需從draggable定義中刪除stop選項（帶功能）。

來源

2012-12-18 14:58:43 mccannf

JQuery-UI Draggable：拖動的元素大小

回答

相關問題