Jquery UI resize 和 draggable 不能一起工作？答案

【问题标题】：JqueryUI resize & draggable does not work together?Jquery UI resize 和 draggable 不能一起工作？
【发布时间】：2014-10-08 14:11:23
【问题描述】：

我在同一元素中使用 jqueryui 调整大小和可拖动时遇到问题。他们应该如何合作？在这个版本中，我可以调整图像大小，但我不能拖动它。想法是能够将图像拖动到更大的 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"});
});

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

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

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

Here's a JSFiddle

【讨论】：

谢谢。这解决了问题，现在我明白为什么它不起作用了。

【解决方案2】：

这个解决了我的类似问题

当图像可调整大小时，它们被一个 div 包裹。如果您希望图像可调整大小和可拖动，则必须使包装器可拖动。

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

但是，这并不理想，因为用户不必知道可调整大小的实现即可使用可拖动（并且您必须在可拖动之前使图像可调整大小）。另外，在当前的实现中，如果你使用上面的代码然后调用.resizable('destroy')，当包装器被移除时，draggable 将会被销毁。

【讨论】：

【解决方案3】：

这是您要查找的代码吗：

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

fiddle

您需要将您的可拖动对象指向图像的包含 div。

【讨论】：

是的。 Aelieo 的回答也正确，安德鲁的小提琴按我的要求工作得更准确。谢谢你们！