Перетаскивание с помощью Dragula.js на мобильном устройстве работает не так, как ожидалось. ⇐ Javascript

Форум по Javascript
Anonymous
Перетаскивание с помощью Dragula.js на мобильном устройстве работает не так, как ожидалось.

Сообщение Anonymous »

У меня есть сайт 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';
}

});

Код: Выделить всё

    body {
background-color: #942a57;
margin: 0 auto;
max-width: 760px;
}

html, body {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

body, input, button {
color: #ecf0f1;
font-family: Georgia,Helvetica;
font-size: 14px;
}

h1 {
background-color: #ac5c7e;
margin-bottom: 0;
margin-top: 20px;
padding: 10px;
text-align: center;
}

h3 {
background-color: rgba(255, 255, 255, 0.2);
border-bottom: 5px solid #a13462;
padding: 10px;
text-align: center;
}

h3 div {
margin-bottom: 10px;
}

.tagline {
margin-top: 0;
position: relative;
}

.tagline-text {
vertical-align: middle;
}

.__slackin {
float: right;
margin-left: 10px;
vertical-align: middle;
}

.promo {
background-color: #ff4020;
border-bottom: 5px solid #c00;
font-style: italic;
margin-bottom: 0;
padding: 10px;
}

a {
font-weight: bold;
}

a, a:hover {
color: #ecf0f1;
}

pre {
white-space: pre-wrap;
}

pre code {
color: #fff;
font-size: 14px;
line-height: 1.3;
}

label {
display: block;
margin-bottom: 15px;
}

sub {
display: block;
font-size: 11px;
font-style: italic;
margin-top: -10px;
text-align: right;
}

ul {
margin: 0;
padding: 0;
}

.parent {
background-color: rgba(255, 255, 255, 0.2);
margin: 50px 0;
padding: 20px;
}

input {
background-color: #ecf0f1;
border: 0 none;
color: #942a57;
display: block;
margin: 5px 0;
outline: medium none;
padding: 10px;
width: 100%;
}

button {
background-color: #ecf0f1;
border: 0 none;
color: #942a57;
cursor: pointer;
margin-left: 6px;
outline: medium none;
padding: 18px 12px;
}

button:hover {
background-color: #e74c3c;
color: #ecf0f1;
}

.gh-fork {
border: 0 none;
position: fixed;
right: 0;
top: 0;
}

.wrapper {
margin: 5px;
padding: 5px;
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
/*overflow: auto;*/
overflow:hidden;
}

.dragula_answer

.dragula_card_table {
/* width: 100%;  */
}

.dragula_constant_text {
margin: 5px;
padding: 5px;
}

.dragula_container {
/*background-color: rgba(255, 255, 255, 1);*/
display: table-cell;
width: 50%;
margin: 20px;
padding: 20px;
border-radius: 5px;
}

.dragula_container_answer {
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
width: 90%;
height: 10vw;
margin: 5px;
padding: 5px;
border-radius: 5px;
text-align: center;
}

.placeholder_dragula_container {
background-color: #942a57;
display: table-cell;
width: 50.%;
border: solid 1px;
margin: 2px;
padding: 2px;
border-radius: 2px;
}

.dragula_solution_ok_dragula_container {
/* background-color: #942a57; */
display: table-cell;
width: 100%;
border: none;
/* margin: 2px; */
padding: 2px;
margin-left: auto;
margin-right: auto;
}

.dragula_container:nth-child(2n+1) {
/*background-color: rgba(0, 0, 0, 0.2);*/
/*border: solid whitesmoke 1px;
border-radius: 5px;*/
}

.dragula_container > div, .gu-mirror {
background-color: rgba(0, 0, 0, 0.2);
margin: 10px;
padding: 10px;
transition: opacity 0.4s ease-in-out 0s;
}

.dragula_container > span, .gu-mirror {
background-color: rgba(0, 0, 0, 0.2);
margin: 10px;
padding: 10px;
transition: opacity 0.4s ease-in-out 0s;
}

.dragula_container > div {
cursor: grab;
}

.dragula_container > span {
cursor: grab;
}

.gu-mirror {
cursor: grabbing;
}

.dragula_container .ex-moved {
background-color: #e74c3c;
}

.dragula_container.ex-over {
background-color: rgba(255, 255, 255, 0.3);
}

#left-lovehandles > div, #right-lovehandles > div {
cursor: initial;
}

.handle {
background-color: rgba(0, 0, 0, 0.4);
cursor: move;
margin-right: 5px;
padding: 0 5px;
}

.image-thing {
display: block;
margin: 20px 0;
text-align: center;
}

.slack-join {
font-size: 14px;
font-weight: normal;
line-height: 16px;
margin-top: -8px;
position: absolute;
right: 10px;
top: 50%;
}

.questionCard {
background-color: #80000022;
margin: auto;
padding: 5px;
box-shadow: 5px 5px black;
border: none;
border-radius: 10px;
/* width: 55%; */
display: inline-flex;
flex-direction: row;
/* center items horizontally */
align-items: center;
/* center items vertically */
justify-content: center;
overflow:hidden;
/* display: table-cell; */
}

/*TEST*/
#buttonContainer {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: none;
width: 98%;
}

.dragula_text_to_solve{
display: block;
margin: auto;
font-size: 4vw;
}

Код: Выделить всё


"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]



Подробнее здесь: https://stackoverflow.com/questions/798 ... s-expected
Вернуться к началу

Вернуться в «Javascript»