CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrag-and-drop
peterHasemann
peterHasemann

Reputation: 1590

Jquery Drag and Drop - insert dragged div container before other container

I got some containers and want to manipulate the DOM by inserting the dragged container before the container, the dragged one is dragging over.

Means ... This is the current placement

Default

Now I want to place the red container before the green one

Insert

and it will look this

Desired

Important note: I know there is Jquery UI and it's really easy to use, but I may not use it.

So I know I can use the jquery functions .insertBefore() and .insertAfter() but I am struggling with the drag-events.

Here is a small example showing my current work

$(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>

Would someone mind helping me filling the empty event functions below?

Upvotes: 1

Views: 1973

Answers (1)

peterHasemann
peterHasemann

Reputation: 1590

So I finally got it. If someone wants to know, how it works take this fiddle

$(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>

Upvotes: 2

Related Questions