У меня есть сайт WordPress, на котором я добавил новую страницу для тестирования drula.js. Частично это работает, потому что я могу перетаскивать, но есть некоторые ошибки:
когда я пытаюсь перетащить элементы вниз, мобильный браузер хочет перезагрузиться; Я добавил текст над контейнером, но он все равно ведет себя так.
когда я начинаю перетаскивать элемент, страница не фиксируется, но также прокручивается, поэтому мой целевой контейнер удаляется;
Если я проверю демонстрационную страницу Dragula (https://bevacqua.github.io/dragula/), ситуация будет такой же. Если я начну перетаскивать по горизонтали, это (в основном) работает (в обоих случаях), но это будет серьёзным ограничением для пользователя, поэтому хотелось бы это исправить. На ПК моя страница работает нормально.
В настоящее время каждый код и стиль помещены на страницу в WordPress.
Пожалуйста, помогите мне найти решение двух вышеуказанных проблем. Спасибо!
Полная страница (исходная страница WordPress находится здесь: https://vilagvevo.hu/dragtest_mobile/):
// Prevent zooming with more than one finger
document.addEventListener('touchstart', function(e) {
if (e.touches.length > 1) {
e.preventDefault(); // Prevent zoom
}
}, { passive: false });
// Prevent pinch zooming with gestures
document.addEventListener('gesturestart', function(e) {
e.preventDefault(); // Prevent zoom gesture
}, { passive: false });
// init
document.getElementById("solutionWasOk").style.display= 'none';
//document.getElementById("arrowDekoToShowWhatToDo").style.display= 'block';
// 1. Get your containers
const containers = [
document.getElementById('answer_container'),
document.getElementById('possible_answers_container')
];
// 2. Initialize Dragula with the containers
const drake = dragula(containers, {direction: 'horizontal'});
// 3. Listen for the 'drop' event
drake.on('drop', (el, target, source, sibling) => {
console.log('Element dropped:', el.id); // ID of the element being moved
console.log('Dropped into:', target.id); // ID of the container it landed in
console.log('Came from:', source.id); // ID of the original container
if (target.id == "answer_container")
{
if (el.id.includes("good"))
{
document.getElementById(el.id).style.color = 'lawngreen';
document.getElementById("solutionWasOk").style.display= 'block';
document.getElementById(source.id).style.display= 'none';
document.getElementById("answer_container").style.backgroundColor = document.getElementById(el.id).style.backgroundColor;
}
else
{
document.getElementById(el.id).style.color = 'red';
document.getElementById("solutionWasOk").style.display= 'none';
}
}
else
{
// dropped back into the possible answers box
document.getElementById(el.id).style.color = 'white';
}
});
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Zuverlässigkeit
Zuverlässigkeit
Zuverlässigkeit
Zuverlässigkeit
nach
Die junge Frau fährt am Samstag Abend schnell ... Hause.
[img]https://vilagvevo.hu/wp-content/uploads/2025/09/image.png[/img]
У меня есть сайт WordPress, на котором я добавил новую страницу для тестирования drula.js. Частично это работает, потому что я могу перетаскивать, но есть некоторые ошибки: [list] [*]когда я пытаюсь перетащить элементы вниз, мобильный браузер хочет перезагрузиться; Я добавил текст над контейнером, но он все равно ведет себя так. [*]когда я начинаю перетаскивать элемент, страница не фиксируется, но также прокручивается, поэтому мой целевой контейнер удаляется; [/list] Если я проверю демонстрационную страницу Dragula (https://bevacqua.github.io/dragula/), ситуация будет такой же. Если я начну перетаскивать по горизонтали, это (в основном) работает (в обоих случаях), но это будет серьёзным ограничением для пользователя, поэтому хотелось бы это исправить. На ПК моя страница работает нормально. В настоящее время каждый код и стиль помещены на страницу в WordPress. Пожалуйста, помогите мне найти решение двух вышеуказанных проблем. Спасибо! Полная страница (исходная страница WordPress находится здесь: https://vilagvevo.hu/dragtest_mobile/):
[code]// Prevent zooming with more than one finger document.addEventListener('touchstart', function(e) { if (e.touches.length > 1) { e.preventDefault(); // Prevent zoom } }, { passive: false });
// 1. Get your containers const containers = [ document.getElementById('answer_container'), document.getElementById('possible_answers_container') ];
// 2. Initialize Dragula with the containers const drake = dragula(containers, {direction: 'horizontal'});
// 3. Listen for the 'drop' event drake.on('drop', (el, target, source, sibling) => { console.log('Element dropped:', el.id); // ID of the element being moved console.log('Dropped into:', target.id); // ID of the container it landed in console.log('Came from:', source.id); // ID of the original container
if (target.id == "answer_container") { if (el.id.includes("good")) { document.getElementById(el.id).style.color = 'lawngreen'; document.getElementById("solutionWasOk").style.display= 'block'; document.getElementById(source.id).style.display= 'none'; document.getElementById("answer_container").style.backgroundColor = document.getElementById(el.id).style.backgroundColor; } else { document.getElementById(el.id).style.color = 'red'; document.getElementById("solutionWasOk").style.display= 'none'; } } else { // dropped back into the possible answers box document.getElementById(el.id).style.color = 'white'; }
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Мобильная версия