javascript - 在选择合并框

Question

我正在尝试开发一个具有以下功能的小页面:

• 应该有 10 行，每行 3 个框。
• 如果我选择 2 个或更多框或拖动一个框，它应该被合并。

例如如果下面是我的第一个屏幕 然后我选择两个框然后下面是结果

请参阅Fiddle

这里它只在第一次工作。我想保存状态，当我点击 close 按钮时它应该回滚到以前的状态。

请帮助我。

Answer 1

请注意，您正在使用我提供给您的合并功能。

正如我告诉你的，代码只是为了解释要遵循的一般方法。

还记得调用此函数使新元素可放置:

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);
}

在 this 版本我将每个任务划分为不同的函数，所以 merge() 变成:

var merge = function() {
    /* contains: top left bottom right */
    var properties = calculateSize();
    var $merged = createNewDiv();
    insert($merged, searchWhereInsert(properties));
    modifyAsDroppable($merged);
    setSize($merged, properties);
    removeMerged();
}

如果您希望它不仅在第一次工作时有效，您还必须按照如何填充selected 数组的方式进行工作。

更新

在 this demo 我已经修复了“一次性工作”，现在可以一直工作了。选定数组的创建有一个错误，现在是:

if(index >= 0) {
  selected.push(index);
}

事已至此，现在自行提供“撤消”功能。

更新+回滚

在 this version 你有一个回滚功能，但它有很多问题(在某些情况下不起作用)。
改进它!

更新 + 回滚固定 && 工作

个人自负， HERE 工作回滚。 (酷!)