JqueryUI调整大小&拖动不起作用

JqueryUI resize & draggable does not work together?

本文关键字：拖动 不起作用 amp 调整 JqueryUI      更新时间：2023-09-26

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

这是小提琴。

这是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"});
});

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

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

这是一个JSFiddle

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

当图像被设置为可调整大小时，它们被div包装。如果你想使图像的大小可调整并可拖动，你必须使包装器可拖动。

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

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

这是您要查找的代码吗：

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

小提琴

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

相关文章：