Simple Javascript Drag and Drop
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

With the current code I have I am able to drag and drop elements and re-order them but right now elements stack upon each other and this is not the desired behavior.

I don't want to just drag and drop. I want that when I drop the left element into the right, the right element swaps with the left. This means that upon dropping the left element into the right element, the right element should take the position of the left element (and viceversa).

This example has just 2 items, but I would need this to work with any number of items. So if I drop element 1 into element 5, element 5 should switch position with element 1.

Swap position is the desired behavior.

Here is the page that needs to be modified:
http://orbitcoins.website/demos/demo%20-%20json_nodes_diagram/test.php

Here is the concerning code needed to be fixed:
handleDraggablePanel = function() {
"use strict";
var a = $(".panel").parent("[class*=col]"),
b = ".panel-heading",
c = ".row > [class*=col]";
$(a).sortable({
handle: b,
connectWith: c,
stop: function(a, b) {
b.item.find(".panel-title").append('<i class="fa fa-refresh fa-spin m-l-5" data-id="title-spinner"></i>'), handleSavePanelPosition(b.item)
}
})
},

This code is found on <script src="../demo - event_speakers/assets/js/apps.min.js"></script> which is called by App.init()

Tags
javascript

Crowdsource coding tasks.

1 Solution


Ok,

Here is my working code: you can use this library: this is how i make it done: http://vishalok12.github.io/jquery-dragarrange/