Question

enter image description here

我希望用户可以在容器“你的文本”中写入文本，然后按添加。然后将在大容器（红线）中创建具有用户提供信息的新容器。我可以做到这一点，但如果我想在一层有2个帖子怎么办？

如果有2个帖子的楼层并且用户添加了新的帖子，则整个楼层向下移动并且新帖子进入并且位于最新楼层的左侧。然后，如果用户添加另一个，它将被放在右侧的最新楼层。这就是逻辑。等等。

我不需要完整的代码，也许是一些教程或JUST IDEA如何做到这一点，因为我可以添加1个帖子，然后在1个楼层将是1个帖子，类似于'TODO'应用程序。但是，如果我想在1楼里做两件事怎么办？也许有一些jquery插件？

根据要求，这里是图片应该如何发生

enter image description here

谢谢！

Answer 1

每一层可能是一对<div>位于较大的红色<li>内的<ul>。

你需要创建一个充当“指针”的变量，这个指针决定了楼层的位置和位置：

floor: 0, position: [0,1]（0表示楼层为空，1表示楼层已填满一半）

当地板递增时，可以插入新的<li>，当位置为0或1时，可以添加<div>。

当位置大于1时，请按下一个级别。

我希望这是有道理的！

Answer 2

如果顶行已满，可以使用prepend()使用jQuery添加新行，如果不是，则可以在第二项添加文本。

HTML

<div style="padding:30px"><input/><button>Add</button></div>
<div id="content"> </div>

JS

/* second item in new row has empty class, used to determine if need to add row or not */
function newRow(txt){
   var row='<div class="row">';
    row+='<div class="item"><div class="item_text">'+txt+'</div></div>';
    row+='<div class="item"><div class="item_text empty">&nbsp;</div></div>'; 
    row+='<div style="clear:both"></div></div>';
 return row
}

$('button').click(function(){
    var txt=$('input').val(), $cont=$('#content');
    if( txt=='') return;
    var $emptyItem=$cont.find('.row:first .empty')
    if($emptyItem.length){
      $emptyItem.text(txt).removeClass('empty');  
    }else{
       $cont.prepend( newRow(txt) ); 
    }   

})

的 DEMO

Answer 3

因为你没有提到你的网站或应用程序是什么样的，它做了什么，所以我认为与你想要达到的目标不完全相同。如果您的动机是填充容器，则第一行中的空白空间看起来不太好（作为最终用户的视点）。如果我使用这样的UI，那么我会期待这样的事情： -

                 _____
text1           [_____]
                  add

                 _______
text2 | text1   [_______]
                  add

                 _______
text3 | text2   [_______]     
------|------     add
text1 |

                 ______
text4 | text3   [______]
------|------     add
text2 | text1

这是我创造的东西。我希望这对我想说的内容有意义

FULL SCREEN DEMO

CODE

上面的演示支持：

1。从容器中删除一个框

2。将id添加到框中，根据订单中的订单移除和添加框，例如最近添加的框将具有标识box1

尝试使用连续数字(1,2,3..)或工作日(sunday,monday..)等

注意： - 我已经对opera和chrome中的代码进行了测试。使用的脚本看起来并不复杂，但css包含一些如果你想要遵循相同的html结构，那些必要的部分，这些部分有（下面）它们的评论

在小容器中加入小容器，如果在大容器中，一层是2个小容器（见图片）

3 个答案: