在选择合并框上

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 工作回滚。 （酷！）