#165 change question_order

django/templates/library/detail_quiz.html

@@ -1,6 +1,8 @@
 {% extends 'base.html' %}
 
 {% block content %}
+{% load static %}
+<script src="{% static 'js/sortablejs/Sortable.min.js' %}"></script>
 
 <div class="container mx-auto px-4">
     <div class="flex flex-wrap space-y-2 items-center justify-between mb-6 dark:text-white">
@@ -129,16 +131,16 @@
 
         {% if questions %}
        
-            <div class="divide-y divide-gray-200">
+            <div class="divide-y divide-gray-200" id="questions-list">
                 {% for question in questions %}
                 
 
                 
-                    <div class="w-full rounded-xl p-4 hover:bg-gray-50 dark:hover:bg-[#2a2f3a] dark:text-white">
-                        <p>{{ forloop.counter }}.</p>
+                    <div data-question-id="{{ question.id }}" class="question-item w-full rounded-xl p-4 hover:bg-gray-50 dark:hover:bg-[#2a2f3a] dark:text-white">
+                
                         {% if quiz.user_id == request.user %} <a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" > {% endif %}
                         <div class="flex justify-between items-start">
-                            
+                                   <p class="question-counter pr-4 ">{{ forloop.counter }}.</p> 
                             <div class="flex-grow">
                                 <p class="font-medium">{{ question.data.question }}</p>
                                 <div class="mt-1">
@@ -593,4 +595,51 @@
 </details>
 
 
+
+
+{% if quiz.user_id == request.user %}
+
+<script>
+Sortable.create(document.getElementById('questions-list'), {
+    animation: 300,     
+    swapThreshold: 0.65,
+    delay: 100,           // wie lange gedrückt halten in ms
+    delayOnTouchOnly: true, // nur auf Touch-Geräten anwenden
+    touchStartThreshold: 5, 
+
+    onStart: () => {
+        if (navigator.vibrate) {
+            navigator.vibrate(75); 
+        }
+    },
+
+    onEnd: () => {
+
+        const items = Array.from(document.querySelectorAll('#questions-list .question-item'));
+
+        // Counter im Browser updaten
+        items.forEach((el, i) => {
+            const counterEl = el.querySelector('.question-counter');
+            if (counterEl) counterEl.textContent = `${i+1}.`;
+        });
+        // Reihenfolge sammeln
+        const order = Array.from(document.querySelectorAll('#questions-list .question-item'))
+                           .map((el, i) => ({id: el.dataset.questionId, position: i+1}));
+                           
+ 
+        // an Django senden
+        fetch("{% url 'library:reorder_questions' %}", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': '{{ csrf_token }}'
+            },
+            body: JSON.stringify({order})
+        });
+    }
+
+});
+</script>
+{% endif %}
+
 {% endblock %}