这一切都很好,现在我的要求改变了我放弃我的.draaa项目的div也必须可以调整大小。所以我将我的物品丢弃在可以放置和调整大小的DIV中。
选项遏制:'#GridDiv'不再工作了,但是当#GridDiv dident可以调整大小时它就可以工作了。因此,当我调整GridDiv的大小时,删除的元素也应该调整大小但不要大于#GridDiv'。
有人有想法吗?如果您滚动浏览代码,您将理解。
$(".draaa").draggable({
helper: 'clone',
stop: function(ui, event){
var stop = $(this).position();
$(this).attr('data-component-x', stop.left);
$(this).attr('data-component-y', stop.top);
}
});
$('#GridDiv').resizable();
$("#GridDiv").droppable({
accept: '.draaa',
drop: function(event, ui) {
i ++;
var getClone = $(ui.draggable).clone();
getClone.attr("id",i+"_"+getClone.attr('id'));
var hela_cid =getClone.attr("id");
var deladcid = hela_cid.split("_");
var cid = deladcid[2];
var stop = $(getClone).position();
var widthpx = getClone.css('width');
var heightpx = getClone.css('height');
var width = parseInt(widthpx, 10);
var height = parseInt(heightpx, 10);
var draggableDocumentOffset = ui.helper.offset();
var droppableDocumentOffset = $(this).offset();
var left = draggableDocumentOffset.left - droppableDocumentOffset.left;
var top = draggableDocumentOffset.top - droppableDocumentOffset.top;
getClone.css("left",left);
getClone.css("top", top);
getClone.css("position", "absolute");
$(this).append(getClone);
$("#GridDiv .draaa").addClass("item");
$(".item").removeClass("ui-draggable draaa");
$(".item").draggable({
containment: '#GridDiv',
//grid: [10,10],
stop: function(ui, event){
var stop = $(this).position();
$(this).attr('data-component-x', stop.left);
$(this).attr('data-component-y', stop.top);
},
}).resizable({
helper: "ui-resizable-helper",
此剂量工作
//遏制:'#GridDiv',
//maxHeight: parseInt(MaxHeight),
//maxHeight: 300,
stop: function(event, ui) {
var width = ui.size.width;
var height = ui.size.height;
$('#'+hela_cid).attr('data-component-width', width);
$('#'+hela_cid).attr('data-component-height', height);
}
});
}
});
该行已取消注释。所以.draaa组件我可以调整大小,然后父母'#GridDiv'我不想......
答案 0 :(得分:0)
好的,我发现为什么它不起作用:/
}).resizable({
//helper: "ui-resizable-helper",
containment: '#GridDiv',
助手选项没有发生,为什么?我不知道。所以我没有帮助选项:)