JqueryUI調整大小和拖動不起作用？

我有問題，使用jqueryui調整大小和可拖動相同的元素。他們應該如何一起工作？在這個版本中，我可以調整圖像大小，但是我無法拖動它。想法是能夠拖動更大的div內的圖像，但不能調整它比內部div更大。這應該是最終的結果。有人可以給出一個提示如何獲得可拖動和調整工作在相同的元素？JqueryUI調整大小和拖動不起作用？

這裏是在fiddle。

這裏是HTML

<div id="container"> 
<div id="area"> 
    <div class="testi"><img class="imageHere" width="200" src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" /></div> 
</div>

CSS

#area{ 
position:absolute; 
top:67px; 
left:75px; 
border:solid 2px; 
height:215px; 
width:600px; 
background-color:#FFF; 
} 
.imageHere{ 

} 
#container{ 
position:relative; 
float:left; 
margin-left:50px; 
border:solid 2px; 
height:350px; 
width:750px;  
}

的Javascript

$(function() { 
$(".imageHere").draggable({ cursor: "move",containment: "#container"  }).resizable({containment: "#container"}); 
});

來源

2014-10-08 Jarno

是你正在尋找此代碼：您需要將您的可拖動到圖像的包含div

$(function() { 
    $(".testi").draggable(); 
    $(".imageHere").resizable(); 
});

fiddle

。

來源

2014-10-08 14:19:52 Andrew

是的。 Aelieo也正確地回答說，安德魯的小提琴工作更精確，因爲我想。謝謝你們倆！ – Jarno 2014-10-08 14:27:58

如果設置resizabledraggable之前它會工作。

$(function() { 
    $(".imageHere"). 
    resizable({ 
     containment: "#container" 
    }). 
    draggable({ 
     cursor: "move", 
     containment: "#container" 
    }); 
});

Here's a JSFiddle

來源

2014-10-08 14:14:18 helllomatt

謝謝。這解決了問題，現在我明白了爲什麼它不起作用。 – Jarno 2014-10-08 14:26:50

這一個解決我的一個類似的問題

當圖像由可調整大小，它們是由一個div包裹。如果你想要一個圖像可調整大小和拖動，你必須使包裝可拖動。

$('img') 
    .resizable() 
    .parent() 
     .draggable();

然而，這並不理想，因爲用戶不應該知道可調整大小的實現使用拖動（你必須作出之前拖動圖像可調整大小）。此外，在當前的實現中，如果您要使用上述代碼，然後調用.resizable('destroy')，則在移除包裝器時，可拖動對象將被銷燬。

來源

2017-01-18 06:58:07

JqueryUI調整大小和拖動不起作用？

回答

相關問題