[英]How do you resize a cloned jQuery UI element (image)
我特别需要克隆一个元素(图像)并在容器内可拖动,并且一旦进入容器,仍保留其可拖动(但不能克隆)。
我只想将拖动到容器内的克隆元素重新调整大小,但是我无法使其正常工作。
我只能调整父元素的大小。 有什么方法只能.resize克隆的元素吗?
有点奇怪但有效的示例: http : //jsfiddle.net/rGUma/4/
码:
<div class="drag"><img src="..." /></div>
<div class="drag"><img src="..." /></div>
<div class="drag"><img src="..." /></div>
<div class="drop-zone"></div>
<script>
$(".drop-zone").droppable({
accept: '.drag',
drop: function(event, ui) {
var $clone = ui.helper.clone();
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '.drop-zone'
}));
}
}
});
$(".drag").draggable({
helper: 'clone'
});
//this works but I dont want it on outside elements
$( '.drag' ).resizable({
helper: "ui-resizable-helper"
});
//this doesn't work on cloned images but what I want working
$( '.drop-zone img' ).resizable({
helper: "ui-resizable-helper"
});
// '.inside-drop-zone img' also doesnt work
});
</script>
PS。 如果有人可以解释为什么它不起作用,将不胜感激。
它不起作用,因为克隆从未设置为可调整大小。 .resizable
仅适用于开头存在的元素,不适用于您创建的任何新元素。
我将可调整大小的调用移至克隆部分,以将其应用于克隆。 这也意味着,根据您对源代码的评论( 更新的jsfiddle ),外部框的大小不可调整:
$(document).ready(function($) {
$(".drop-zone").droppable({
accept: '.drag',
drop: function(event, ui) {
var $clone = ui.helper.clone();
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '.drop-zone'
}));
$clone.resizable({ //this works but I dont want it to on outside elements
helper: "ui-resizable-helper"
});
}
}
});
$(".drag").draggable({
helper: 'clone'
});
$('.drop-zone img').resizable({ //this doesn't work because its cloned "inside" but its what I want working
helper: "ui-resizable-helper"
});
// '.inside-drop-zone img' also doesnt work
//
});
只需使用:
$clone.children().resizable({
helper: "ui-resizable-helper"
});
并且所有在class: drop-zone
下的图像都会重新调整大小。
克隆诞生时,将可调整大小的创建绑定到某种事件吗?
$('.drop-zone').on('hover', '.drag', function() {
$(this).resizable({
helper: "ui-resizable-helper"
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.