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调整大小和拖动不起作用？

回答

相关问题