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

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

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

Here's a JSFiddle

Answer 2

这个问题解决了我的类似问题

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

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

然而，这并不理想，因为用户不必了解resizable的实现以使用draggable（并且您必须在可拖动之前使图像可调整大小）。此外，对于当前的实现，如果您使用上面的代码然后调用.resizable('destroy')，则在删除包装器时将会销毁draggable。

Answer 3

这是您要查找的代码：

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

fiddle

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

JqueryUI调整大小＆amp; draggable不能一起工作？

3 个答案: