Jquery Glisser-déposer - insérer le conteneur div glissé avant l'autre conteneur

Question

J'ai récupéré des conteneurs et je souhaite manipuler le DOM en insérant le conteneur déplacé avant le conteneur, le conteneur glissé est déplacé.

moyens ... Ce est le placement actuel

Maintenant, je veux placer le récipient rouge avant le vert un

et il regardera ce

Note importante: Je sais qu'il y a l'interface utilisateur Jquery et c'est vraiment facile à utiliser, mais je ne peux pas l'utiliser.

Donc je sais que je peux utiliser les fonctions jquery .insertBefore() et .insertAfter() mais je suis aux prises avec les drag-events.

Voici un petit exemple montrant mon travail actuel

$(document).ready(function() { // add the events to the containers 
 
    addDragDropToElement("divRed"); 
 
    addDragDropToElement("divBlue"); 
 
    addDragDropToElement("divGreen"); 
 
    addDragDropToElement("divYellow"); 
 
}); 
 

 
function addDragDropToElement(element) { 
 
    var ele = $("#" + element); 
 
    
 
    ele.prop("draggable", true); // make the div draggable 
 

 
    ele.on('dragstart', function() { 
 
     startDragging(event); 
 
    }); 
 

 
    ele.on('dragenter', function() { 
 
     enterDragging(event); 
 
    }); 
 

 
    ele.on('dragover', function() { 
 
     dragOver(event); 
 
    }); 
 

 
    ele.on('dragleave', function() { 
 
     leaveDragging(event); 
 
    }); 
 

 
    ele.on('drop', function() { 
 
     dropElement(event); 
 
    }); 
 

 
    ele.on('dragend', function() { 
 
     stopDragging(event); 
 
    }); 
 
} 
 

 
    var draggedElement = null; 
 

 
function startDragging(e) { 
 
    draggedElement = e.target; 
 
} 
 

 
function enterDragging(e) { 
 

 
} 
 

 
function dragOver(e) { 
 
    e.preventDefault(); 
 
} 
 

 
function leaveDragging(e) { 
 

 
} 
 

 
function dropElement(e) { 
 
    e.preventDefault(); 
 
    var targetElement = e.target; 
 

 
    $(draggedElement).insertBefore(targetElement); 
 
} 
 

 
function stopDragging(e) { 
 

 
}

#divRed{background:red;} 
 
#divBlue{background:blue;} 
 
#divGreen{background:green;} 
 
#divYellow{background:yellow;} 
 

 
.container{ 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container" id="divRed"></div> 
 
<div class="container" id="divBlue"></div> 
 
<div class="container" id="divGreen"></div> 
 
<div class="container" id="divYellow"></div>

Est-ce que l'esprit de quelqu'un me aider à remplir les fonctions d'événements vides ci-dessous?

Answer 1

Donc, j'ai finalement compris. Si quelqu'un veut savoir, comment cela fonctionne: prendre ce violon

$(document).ready(function() { 
 
    addDragDropToElement("divRed"); 
 
    addDragDropToElement("divBlue"); 
 
    addDragDropToElement("divGreen"); 
 
    addDragDropToElement("divYellow"); 
 
}); 
 

 
function addDragDropToElement(element) { 
 
    var ele = $("#" + element); 
 
    
 
    ele.prop("draggable", true); 
 

 
    ele.on('dragstart', function() { 
 
     startDragging(event); 
 
    }); 
 

 
    ele.on('dragover', function() { 
 
     dragOver(event); 
 
    }); 
 

 
    ele.on('drop', function() { 
 
     dropElement(event); 
 
    }); 
 
} 
 

 
var draggedElement = null; // the element that is dragged 
 

 
function startDragging(e) { 
 
    draggedElement = e.target; // store the dragged element 
 
} 
 

 
function dragOver(e) { 
 
    e.preventDefault(); 
 
} 
 

 
function dropElement(e) { 
 
    e.preventDefault(); 
 
    var targetElement = e.target; // the element under the dragged element 
 

 
    $(draggedElement).insertBefore(targetElement); // place the dragged element before the other element 
 
}

#divRed{background:red;} 
 
#divBlue{background:blue;} 
 
#divGreen{background:green;} 
 
#divYellow{background:yellow;} 
 

 
.container{ 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container" id="divRed"></div> 
 
<div class="container" id="divBlue"></div> 
 
<div class="container" id="divGreen"></div> 
 
<div class="container" id="divYellow"></div>