Drag & Drop mit Dragula.js auf Mobilgeräten funktioniert nicht wie erwartet ⇐ JavaScript

[Anonymous]

Ich habe eine WordPress-Site, auf der ich eine neue Seite zum Testen von Dragula.js hinzugefügt habe. Es funktioniert teilweise, weil ich Drag-and-Drop ausführen kann, aber es gibt einige Fehler:

• Wenn ich versuche, die Elemente nach unten zu ziehen, möchte der mobile Browser neu laden; Ich habe etwas Text über dem Container hinzugefügt, aber es verhält sich immer noch so.
• Wenn ich anfange, ein Element zu ziehen, ist die Seite nicht fixiert, aber sie wird auch gescrollt, sodass mein Zielcontainer wegbewegt wird;

Wenn ich die Demoseite von Dragula (https://bevacqua.github.io/dragula/) überprüfe, ist die Situation dieselbe. Wenn ich anfange, horizontal zu ziehen, funktioniert es (meistens) (in beiden Fällen), aber es wäre eine gravierende Einschränkung für den Benutzer, daher würde ich es gerne beheben. Auf dem PC funktioniert meine Seite einwandfrei.
Jeder Code und Stil wird derzeit in WordPress in die Seite eingefügt.
Bitte helfen Sie mir, eine Lösung für die beiden oben genannten Probleme zu finden. Vielen Dank!
Die komplette Seite (die ursprüngliche WordPress-Seite ist hier: https://vilagvevo.hu/dragtest_mobile/):

Code: Select all

// 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';
}

});

Code: Select all

    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;
}

Code: Select all

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