URL скопирован в буфер обмена!
Как сделать перемещение элементов внутри Zero Block ?
С помощью этой модификации можно свободно перемещать элементы внутри ограниченной зоны или Zero Block при помощи курсора. Поддерживается автоскейл и работа на мобильных устройствах. Дополнительно доступна настройка увеличения элемента и автоматического изменения z-index при перетаскивании.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс для области перемещения
Класс для элементов
Диначмический z-index
Тип курсора при наведении
Увеличение элемента при перетаскивании
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD033--><script>
document.addEventListener("DOMContentLoaded", function () {
const TCDzeroTilda = document.querySelectorAll(".t396");
let TildaElemindTC = 1000;
const TicodeSetelem = {
TCBig: 0.0,
TCDstartZ: false
};
TCDzeroTilda.forEach(block => {
const TiBackTCD = block.querySelector(".t396__carrier");
const TCDShape = block.querySelector(".tc-bg");
if (!TiBackTCD || !TCDShape) return;
const TCDElemTilda = block.querySelectorAll(".tc-grab");
TCDElemTilda.forEach(el => {
el.style.position = "absolute";
el.style.cursor = "grab";
el.style.transition = "transform 0.1s";
let dragging = false;
let shiftX = 0;
let shiftY = 0;
let originalScale = 1;
function getEventPos(e) {
if (e.touches) return { x: e.touches[0].clientX, y: e.touches[0].clientY };
return { x: e.clientX, y: e.clientY };
}
function TiCodeendDragstartDrag(e) {
const Mixx = getEventPos(e);
const elRect = el.getBoundingClientRect();
dragging = true;
shiftX = Mixx.x - elRect.left;
shiftY = Mixx.y - elRect.top;
el.style.cursor = "grabbing";
const style = getComputedStyle(el);
const transform = style.transform;
if (transform && transform !== "none") {
const match = transform.match(/matrix\(([^,]+),/);
originalScale = match ? parseFloat(match[1]) : 1;
} else {
originalScale = 1;
}
if (TicodeSetelem.TCBig) {
el.style.transform = `scale(${originalScale + TicodeSetelem.TCBig})`;
}
if (TicodeSetelem.TCDstartZ) {
TildaElemindTC++;
el.style.zIndex = TildaElemindTC;
}
e.preventDefault();
}
function TiCodeendDragDrag(e) {
if (!dragging) return;
const Mixx = getEventPos(e);
const carrierRect = TiBackTCD.getBoundingClientRect();
let x = Mixx.x - carrierRect.left - shiftX;
let y = Mixx.y - carrierRect.top - shiftY;
const bgRect = TCDShape.getBoundingClientRect();
const bgLeft = bgRect.left - carrierRect.left;
const bgTop = bgRect.top - carrierRect.top;
const bgWidth = bgRect.width;
const bgHeight = bgRect.height;
if (x < bgLeft) x = bgLeft;
if (y < bgTop) y = bgTop;
if (x + el.offsetWidth > bgLeft + bgWidth) x = bgLeft + bgWidth - el.offsetWidth;
if (y + el.offsetHeight > bgTop + bgHeight) y = bgTop + bgHeight - el.offsetHeight;
const zoom = parseFloat(TCDShape.style.zoom) || 1;
el.style.left = (x / zoom) + "px";
el.style.top = (y / zoom) + "px";
}
function TiCodeendDragendDrag() {
if (dragging) {
dragging = false;
el.style.cursor = "grab";
if (TicodeSetelem.TCBig) {
el.style.transform = `scale(${originalScale})`;
}
}
}
el.addEventListener("mousedown", TiCodeendDragstartDrag);
document.addEventListener("mousemove", TiCodeendDragDrag);
document.addEventListener("mouseup", TiCodeendDragendDrag);
el.addEventListener("touchstart", TiCodeendDragstartDrag, { passive: false });
document.addEventListener("touchmove", TiCodeendDragDrag, { passive: false });
document.addEventListener("touchend", TiCodeendDragendDrag);
});
});
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. В Zero Block создаем прозрачный шейп с классом tc-bg и задаем ему размеры области для перетаскивания(например 500 на 500 пикселей). Если нужно перемещать элементы в рамках целого блока, то растягиваем шейп на весь блок. Для этого устанавливаем шейпу настройку window container и задаем высоту 100% ширину 100%.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем элементы для перемещения(это может быть кнопка, текст, шейп, картинка и т. д.). Каждому элементу назначаем класс tc-grab Все элементы должны быть в зоне шейпа tc-bg
3. При необходимости указываем дополнительные настройки в генераторе:
Динамический z-index - если включить, то элемент который передвинули последним будет отображаться поверх остальных;
Тип курсора - можно выбрать стиль курсора при наведении на элемент для передвижения;
Увеличение при перетаскивании - если включено, то элемент в момент перемещения будет немного увеличиваться.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок кода размещаем под зеро блоком.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем элементы для перемещения(это может быть кнопка, текст, шейп, картинка и т. д.). Каждому элементу назначаем класс tc-grab Все элементы должны быть в зоне шейпа tc-bg
3. При необходимости указываем дополнительные настройки в генераторе:
Динамический z-index - если включить, то элемент который передвинули последним будет отображаться поверх остальных;
Тип курсора - можно выбрать стиль курсора при наведении на элемент для передвижения;
Увеличение при перетаскивании - если включено, то элемент в момент перемещения будет немного увеличиваться.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок кода размещаем под зеро блоком.
Перетаскивай элементы чтобы прочитать все отзывы
