javascript - Jquery UI resize 和 draggable 不能一起工作？

Question

我在同一元素中使用 jqueryui resize 和 draggable 时遇到问题。他们应该如何合作？在此版本中，我可以调整图像大小，但不能拖动它。想法是能够将图像拖到更大的 div 中，但不能将其调整为大于内部 div 的大小。这应该是最后的结果。有人可以提示如何在同一元素中实现可拖动和调整大小的工作吗？

它在 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"});
});

Answer 1

如果您在 draggable 之前设置 resizable 它将起作用。

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

Here's a JSFiddle