我正在开发一个拖放应用程序。我有一个可放置的容器并可拖动。
$( "#dragshock" ).draggable(
{
helper: "clone",
cursor: 'move',
drag: resizeContainer
}
);
通过拖动调用的函数就是这个:
function resizeContainer(e, ui) {
var defaultSize = 108;
var factor = ((ui.position.top)/19);
var correcteSize = defaultSize + factor;
$(this).width(correcteSize);
}
droppable容器上的函数就是这个:
$("#selectedpicture").droppable({
drop: function (event, ui) {
var $canvas = $(this);
if (!ui.draggable.hasClass('canvas-element')) {
var $canvasElement = ui.draggable.clone();
$canvasElement.addClass('canvas-element');
$canvasElement.draggable({
containment: '#geselecteerdefoto'
});
$canvas.append($canvasElement);
var defaultSize = 108;formaat
var factor = ((ui.position.top)/19);
var correcteSize = defaultSize + factor;
var imgSize = correcteSize;
$canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
width: imgSize,
position: 'absolute'
});
}
}
});
此时,draggable中的“drag:resizeContainer”行会导致拖动的容器在拖动时调整大小,而不是鼠标指针后面的克隆。
我想要实现的是,在拖动时,当在容器内向下拖动时,对象已经在视觉上调整大小。丢弃时,应该保持调整大小。
答案 0 :(得分:2)
我找到了解决方案。我觉得这比较容易。
将resizeContainer中的$(this).width(correcteSize)行替换为
$(ui.helper).width(correcteSize);
我将小提琴更新为正确的小提琴以供将来参考。