JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://dsmorse.github.io/gridster.js/demos/assets/css/demo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.js"></script>
<div class="gridster">
<ul>
</ul>
</div>
<button class="btn btn-outline-info" id="check"> Check If unique selected </button>
JavaScript
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
resize: {
enabled: true
}
}).data('gridster');
var json = [{
"col": 1,
"row": 1,
"size_y": 2,
"size_x": 2
}, {
"col": 4,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"col": 6,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"col": 1,
"row": 3,
"size_y": 1,
"size_x": 1
}, {
"col": 4,
"row": 3,
"size_y": 1,
"size_x": 1
},
{
"col": 6,
"row": 3,
"size_y": 1,
"size_x": 1
}
];
for(var index=0;index<json.length;index++) {
gridster.add_widget('<li class="new" ><button class="select-element" style="float: right;">-</button></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}
var parentElement = [];
$(document).on("click", ".select-element", function() {
var current = $(this).closest('li'),
index = inArray(current, parentElement);
if(index < 0) {
current.attr("style", "background-color:red");
parentElement.push(current);
} else {
parentElement.splice(index, 1);
current.removeAttr("style");
}
console.log("Parent Element Array Length");
for (var i = 0; i < parentElement.length; i++) {
console.log(parentElement[i]);
}
});
$(document).on("click", "#check", function() {
alert(checkIfArrayIsUnique(parentElement));
});
function inArray(element, myArray) {
for (var i = 0; i < myArray.length; i++)
{
if ($(myArray[i]).is($(element)))
{
return i; // means there are duplicate values
}
}
return -1;
}
function checkIfArrayIsUnique(myArray)
...