Изменить # 1:
Поскольку я задал эту проблему, я создал скрипт, который позволяет элементам перемещаться вместе, но с проблемами. (
$(this).append(
$('<div class="elem '+classes+'" style="width: 210px; height: 30px" data-modby="'+ui.draggable.attr("data-for")+'"><p>'+text+'</p></div>')
.resizable({
grid: 10,
maxHeight: 120,
maxWidth: 600,
minHeight: 30,
minWidth: 210,
containment: ".box-section"
})
.draggable({
grid: [10,10],
containment: ".box-section",
scroll: false,
helper: "original",
start: function(event, ui) {
posTopArray = [];
posLeftArray = [];
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
thiscsstop = $(this).css('top');
if (thiscsstop == 'auto') thiscsstop = 0;
thiscssleft = $(this).css('left');
if (thiscssleft == 'auto') thiscssleft = 0;
posTopArray[i] = parseInt(thiscsstop);
posLeftArray[i] = parseInt(thiscssleft);
});
}
begintop = $(this).offset().top;
beginleft = $(this).offset().left;
},
drag: function(event, ui) {
var topdiff = $(this).offset().top - begintop;
var leftdiff = $(this).offset().left - beginleft;
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
$(this).css('top', posTopArray[i] + topdiff);
$(this).css('left', posLeftArray[i] + leftdiff);
});
}
}
})
);
Фактическая проблема заключается в том, что перемещенные элементы должны оставаться в контейнере (называемом .box-section, и если у меня есть один элемент, он работает нормально. Также, если у меня есть два элемента, ширина которых не одинакова, если я выберу сортировщик и перетащить, я могу вытащить длиннее контейнера.
Кроме того, если я переместу их быстро (как ниндзя), они поскользнутся, и они не будут в той же сетке, в которой они были.
30 процентов решено с:
Я собираюсь сделать новую вещь, которая может перетаскивать предметы в коробку и изменять их размер.
Моя проблема в том, что я не могу заставить их двигаться вместе. Но с некоторыми правилами.
Правило одно: они должны двигаться на основе сетки 10x10px.
Правило второе: они не могут выйти за рамки своего
(Изменение размера - это проблема, которую я просто не могу себе представить, поэтому мне все равно, изменение размера будет позже)
Я сделал для этого скрипку: http://jsfiddle.net/9fueY/ Вы можете видеть это.
В правой части вы можете видеть входы, а также флажок и (и при наведении курсора на кнопку).
Флажок - это перетаскиваемый объект, перетащите его на изображение. Теперь у вас есть текст или звезда появилась слева.
Если вы введете что-нибудь для ввода, он обновит текст.
На правой стороне окна вы можете увидеть кнопку. Нажав на нее, сделаем клон первого элемента. Перетащите его внутрь.
Если щелкнуть поле справа, оно будет светиться синим цветом. Щелкните два поля справа, чтобы все два текстовых поля стали голубыми на изображении.
Теперь это тот случай, когда я хочу, чтобы они двигались вместе. : D
Каково ваше мнение, что мне с этим делать?
Большое спасибо. - Репас