Take note that you are utilizing the merge function provided by me.
As I mentioned before, the code is simply meant to demonstrate the general approach to follow.
Don't forget to invoke this function in order to make the new element droppable:
var modifyAsDroppable = function(target) {
var what = "<div class=\"handle ui-selectee\"><span class=\"ui-icon ui-icon-carat-2-n-s ui-selectee\"></span></div>";
target.prepend(what);
}
In this version, each task is divided into separate functions, making merge() like this:
var merge = function() {
/* contains: top left bottom right */
var properties = calculateSize();
var $merged = createNewDiv();
insert($merged, searchWhereInsert(properties));
modifyAsDroppable($merged);
setSize($merged, properties);
removeMerged();
}
If you want it to work not just the first time, you need to ensure the correct implementation of how you populate the selected array.
UPDATE
In this demo, I have resolved the issue of "one-time-working" and now it works consistently. There was a flaw in the creation of the selected array, which has been corrected to:
if(index >= 0) {
selected.push(index);
}
Making progress, now it's up to you to implement the "undo" functionality on your own.
Update + rollBack
In this version, there is a rollBack feature available, although it may have some bugs (not functioning in certain scenarios).
Make enhancements!
Update + rollBack fixed && working
Just for personal satisfaction, check out HERE where the rollBack operation is now fully operational. (exciting!)