[英]Issue with draggable and resizable for same element
I've been doing some research about draggable & resizable plugins from jQuery but encountered an issue recently. 我一直在做一些有关jQuery可拖动和可调整大小的插件的研究,但最近遇到了一个问题。 I've tried to replicate this situation on the following fiddle:
我尝试在以下小提琴上复制这种情况:
$('.event').draggable({
grid: [120, 12],
cursor: 'move',
containment: '#container',
start: function (event, ui) {
console.log("event dragging started");
}
}).resizable({
containment: 'parent',
grid: 12,
handles: {
'n': '#ngrip',
's': '#egrip'
},
start: function (e, ui) {
console.log('resizing started');
},
}); });
The resizable south handle doesn't work at all, also the strange thing happens to the north handle -> it decreases size of my div an pushes it rapidly to the right. 可调整大小的南手柄根本不起作用,北手柄上也发生了奇怪的事情->减小了div的大小,并迅速将其向右推。 What am I doing wrong?
我究竟做错了什么?
Your code: 您的代码:
$('.event').draggable({
grid: [120, 12],
cursor: 'move',
containment: '#container',
start: function (event, ui) {
console.log("event dragging started");
}
}).resizable({
containment: 'parent',
grid: 12,
handles: {
'n': '#ngrip',
's': '#egrip'
},
start: function (e, ui) {
console.log('resizing started');
},
});
Code Needed 需要代码
$('.event').draggable({
grid: [120, 12],
cursor: 'move',
containment: '#container'
}).resizable({
containment: 'parent',
grid: [ 120, 12 ],
handles: "n, e, s, w"
});
1) remove trailing comma in the end 2) make handles as handles: "n, e, s, w"
but there is still some bug after this you can only resize after you have dragged from once and resizing work precisely from a pixel maybe because you are using custom resize handlers, I am not sure. 1)删除末尾的逗号2)将句柄作为
handles: "n, e, s, w"
但是此后仍然存在一些错误,您只能在拖动一次并精确调整像素大小后才能调整大小因为您使用的是自定义调整大小处理程序,所以我不确定。 Read the documentation for more help. 阅读文档以获取更多帮助。
New Code 新密码
$('.event').draggable({
cursor: 'move',
containment: '#container'
}).resizable({
containment: '#container',
handles:"n, e, s, w",
start: function (e, ui) {
console.log('resizing started');
}
});
Try this code. 试试这个代码。 Jquery
jQuery的
$(document).ready(function (){
$('.blue').resizable();
$(".blue").draggable();
});
Html HTML
<div id="container">
<div class="column">
<div class="event blue">
</div>
</div>
<div class="column">
<div class="event dark-blue blue" id="event" style="margin-top:3px">
</div>
</div>
</div>
Attach jquery files 附加jQuery文件
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
Try this code i think this will helpful you 试试这个代码,我认为这对您有帮助
Html: HTML:
<div id="container">
<div class="column">
<div class="event blue">
<div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
<div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
</div>
<div class="column">
<div class="event dark-blue" id="event" style="margin-top:3px">
<div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
<div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
</div>
</div>
</div>
</div>
jquery: jQuery的:
$(document).ready(function (){
$('.blue').resizable({
handles: {
's': '#sgrip',
'w': '#wgrip'
}
});
$('.dark-blue').resizable({
handles: {
's': '#sgrip',
'w': '#wgrip'
}
});
$(".column").draggable();
});
Fix it . 修理它 。 Please review it .
请检查一下。
$('.event').draggable({
grid: [120, 12],
cursor: 'move',
containment: '#container',
start: function (event, ui) {
console.log("event dragging started");
}
}).resizable({
containment: '#container',
grid: 12,
handles: {
'n': '#ngrip',
's': '#sgrip'
},
start: function (e, ui) {
console.log('resizing started');
},
});
change the resizable containment from parent
to #container
, and south handle name from #egrip
to #sgrip
. 将可调整大小的容器从
parent
更改为#container
,将南句柄名称从#egrip
为#sgrip
。 nothing else. 没有其他的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.