Take a look: Preview
This is my first time ever dealing with drop and drag seriously. And i kept going.
Lot can be improved. And made more efficent however, i have already spent like 3 hours on it :D.
I did learn a LOOOT.
$('.menu li').on('mousedown', function (e) {
$(this).draggable({
helper: "clone"
}).css({
opacity: '.7'
});
});
var li = {}, i = 0;
function enable(x) {
x.droppable({
hoverClass: "drop-hover",
drop: function (e, ui) {
$(ui.draggable).clone().prependTo(this).draggable().addClass('special').data('i', $(this).data('i'));
$(this).droppable('destroy')
}
});
};
$('.i1').each(function (u, n) {
$(this).data('i', i);
li[i] = $(this);
i++;
});
$('.i1').each(function (u, i) {
enable($(this));
});
$('.m').droppable({
accept: ".special",
drop: function (e, ui) {
var x = $(ui.draggable).data();
$(ui.draggable).remove();
enable(li[x.i]);
}
});
$('input[type="text"]').keypress(function (e) {
if (e.which !== 0 && e.charCode !== 0) { // only characters
var c = String.fromCharCode(e.keyCode | e.charCode);
$span = $(this).siblings('span').first();
$span.text($(this).val() + c); // the hidden span takes
// the value of the input
$inputSize = $span.width();
$(this).css("width", $inputSize); // apply width of the span to the input
}
});