JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="icons ui-helper-clearfix" style="height: 100px;">
<li id="1" class="icon">
<div class="iconed"></div>
<label class="label">Test</label>
</li>
<li id="2" class="icon">
<div class="iconed"></div>
<label class="label">Test</label>
</li>
</ul>
CSS
.icons{list-style:none;margin:0;padding:0; }
.icons .icon{float:left; width: 60px; height: 80px;background: #f2f2f2;border: 1px solid #ccc;list-style:none; margin: 5px; padding: 5px 10px;}
.icons .icon .iconed{position:relative;width:50px;height:50px;border:5px solid #fff;}
.icons .icon .label{font-size: 70%;bottom:0;position:relative; text-align:center;}
.icons-placeholder{float: left;width:60px;height: 80px;padding:5px 10px;margin:5px;}
.icons .ui-selecting { background: #FECA40; }
.icons .ui-selected { background: #F39814; color: white; }
.icons { list-style-type: none;}
.icons li.icon { }
JavaScript
$(document).ready(function() {
$('.ia-header').remove();
$('.icons').die().droppable({
// hoverClass: "ui-state-hover",
// activeClass: "ui-state-active",
drop: function(event, ui) {
$(this).addClass("ui-state-highlight");
var siblings = $(ui.draggable).siblings('.ui-selected');
$(ui.draggable).add(siblings).appendTo($(this))
}
}).selectable({}).children('li.icon').live('dblclick', function(e) {
var url = $(this).attr('href');
console.debug(url);
}).draggable({
revert: 'invalid',
cursor: 'move',
cursorAt: {
left: 0,
top: 0
},
helper: function(e) {
$(this).addClass('ui-selected');
if (e.ctrlKey == true) {} else {
}
var num = $(this).parent('.icons').children('li.ui-selected').length || 0;
return $('<div class="ui-state-highlight"/>').text('Selected ' + num);
},
start: function(e, u) {
}
}).bind('click', function(e) {
if (e.ctrlKey == true) {
$(this).addClass('ui-selected');
} else {
$(this).addClass('ui-selected').siblings('li.icon').removeClass('ui-selected');
}
});
});