Looking for Drag and Drop functionality [closed] - jquery-ui

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Could anyone recommend a good Drag-and -Drop framework out of the box ?
Something like this jquery-ui example, where one can drop a set of widgets onto a sort of Dashboard layout page - example using a photo gallery http://jqueryui.com/droppable/#photo-manager
I just recently found this very cool jquery-ui and Bootstrap 3.0 based dynamic layout tool called gridmanager - http://neokoenig.github.io/jQuery-gridmanager/
You can also check out demos here http://neokoenig.github.io/jQuery-gridmanager/demo/
So with this in mind, I'd like to add a drag/drop sidebar which will allow me to drop "gadgets" onto the grid system.
I'm using Kendo UI as well as JQWidgets, but I'm a bit unsure of how to integrate drag/drop onto this gridmanager system.
After adding jquery-ui and gridmanager js/css files to my index page, here's what the code looks like :
<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
<section class="matter">
<div id="mycanvas">
<div class="row">
<div class="col-md-6">
<p>Content</p>
</div>
<div class="col-md-6">
<p>Content</p>
</div>
</div>
</div>
</section>
</section>
<script>
$(document).ready(function () {
var gm = $("#mycanvas").gridmanager({ // fluid widths
controlPrepend: "<div class='row-fluid'><div class='col-md-12'><div id='gm-addnew' class='btn-group '>",
rowClass: "row-fluid",
rowSelector: "div.row-fluid",
rowPrepend: "<div class='row-fluid gm-editing'>"
});
$(".myexternalcontrol").on("click", function (e) {
// Example use of internal gridmanager function:
gm.appendHTMLSelectedCols('<p>my content to append to all my selected cols</p>');
});
});
</script>
Again, I'd like to setup a sidebar or topbar of widgets which can be dragged onto each grid section below (see screen shots).
and here's a screen shot of how it renders in my beta website.
Thnks in advance for your advice.
regards,
Bob

Answer 1

I'm one of the authors of gridmanager.js. Firstly, jqueryUI is required by gridmanager, so you've already got the drag/drop functionality on the page. However, GM is already using the draggable/sortable jqueryUI features, so be warned you might get some clashes.
GM actually creates a lot of temp markup (and then strips it out on preview/save) - have a look at the generated source code - you'll see divs of class "gm-editable-region" - might be worth trying to make that class a 'droppable' region (i.e, so other things can be dropped on it). You might have to extend gridmanager's activateCols function in order to 'reactivate' the droppable regions when it's gone through the preview process though.
Good luck - the github issue queue is here https://github.com/neokoenig/jQuery-gridmanager/issues