I hope that gridstack team will be in perfect health..! I just want to be able that when I move a widget so the other widgets don't go upward direction to fill it's empty place..! Instead more like I want the other widgets to stay at their location when I move one widget and don't go upward to fill the newly moved widget place..! How am I gonna do that? Can anybody let me know please..? I tried to check and search everywhere but either not getting it or didn't get it how to make it work..!
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function (e) {
jq('.upload').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
jq.ajax({
type:'POST',
url: jq(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success: function(data)
{
jq(".no_image").css("display", "none"),
jq(".show_image").css("display", "block"),
jq(".profile_photo").val(function(index, currentValue) {
return currentValue + data;
});
jq(".image").attr("src","client_images/"+data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}));
jq(".inputFile").on("change", function() {
jq(".upload").submit();
});
$(function () {
var options = {
cell_height: 70
};
$('.grid-stack').gridstack(options);
this.grid = $('.grid-stack').data('gridstack');
this.save_grid = function () {
this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
}, this);
$.ajax
({
type: "POST",
//the url where you want to sent the userName and password to
url: 'save_grid.php',
async: false,
//json object to sent to the authentication url
data: {'positions': JSON.stringify(this.serialized_data, null, ' ')},
success: function () {
alert("Positions Saved!");
}
})
}.bind(this);
$('#save-grid').click(this.save_grid);
this.load_grid();
});
});
</script>
Live Example : http://troolee.github.io/gridstack.js/
Try setting float: true
in the initialization options. And your grid-items will not go upward or to anywhere unless you move it manually.
For Instance :
$(function () {
var options = {
cell_height: 80,
float : true
};
$('.grid-stack').gridstack(options);
});