如何跨越两个父div的子div

时间:2014-02-20 09:47:34

标签: html css backbone.js gridview marionette

背景 我正在使用Backbone.MarionetteJS框架构建网格。然而,我遇到了一个我不确定如何解决的特定问题。

代码: 我的网格构建如下:

<section>
    <div>
        <div class="day"></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div>
        <div class="day">
            <div>
                <div id="c38" class="gridItem droppable ui-droppable">
                    <b>
                        <div id="c90" class="draggable orderItem stored ui-draggable" style="position: relative;"></div>
                    </b>
                </div>
            </div>
            <div>
                <div id="c39" class="gridItem droppable ui-droppable">
                    <b>
                        <div id="c91" class="draggable orderItem stored ui-draggable" style="position: relative;"></div>
                        <div id="c92" class="draggable orderItem stored ui-draggable" style="position: relative;"></div>
                    </b>
                </div>
            </div>
        </div>
    </div>
</section>

正如您所看到的,该部分中的每个div都包含一个带有课程日的div。在这种情况下,日是水平网格行。一天有7个可放置的gridFields,每个都有自己的ID。当天的每个网格字段可以包含多个项目,例如字段C39。

问题:虽然上面的代码效果很好,但可能会发现我有一个项目(让我们拿c92),它不仅放在特定日期的网格字段c39中,还放在网格字段中C38。而不是两次显示网格项目(在每个网格字段中一次),这个项目跨越两个div将更加简洁,因此它看起来像一个单独的项目,可以在之后再次拖放。

但我不知道如何实现这一目标。欢迎任何建议。

2 个答案:

答案 0 :(得分:0)

我不确定你是否通过骨干视图附加这些div。 如果您通过主干视图执行此操作,则默认情况下每个视图都由“div”包装。 我们可以通过添加tag参数来改变它。添加标签:'span'

答案 1 :(得分:0)

嗨再次抱歉我久违了。下面你会发现我的问题已经改回了我的问题的答案。

此代码代表一行:

<div class="day"></div>

一行可以有多个列,例如:

<div id="c39" class="gridItem droppable"></div>

每列依次可以包含多个项目:

<div id="c91" class="draggable orderItem"></div>
<div id="c92" class="draggable orderItem"></div>

DOM将此构建为原始问题中提供的代码。虽然此代码只能在列中使用属于一行的多个项目时找到,但是要求订单跨度不是一个,而是多个列。

我的希望仅仅是避免在网格项目上使用定位来实现可能调整大小的滚动条和窗口的性质。然而,这似乎是不可能的。

对于遇到simulair问题的每个人,我建议在你的行内添加一些额外的包装(或使用实际的行)作为屏幕上定位项偏移的起点,这样实际的代码最终可能会像:

<div class="day"> <!-- row generated by framework -->
    <div class="event"> <!-- used as offset for positioning -->
       <div id="c39" class="gridItem droppable"> <!-- grid column -->
           <div id="c91" class="draggable orderItem" style="position: absolute; left:x; top:y;"></div>
           <div id="c92" class="draggable orderItem" style="position: absolute; left:x; top:y;"></div>
       </div>
    </div>
</div>