Как охватить дочерний div над двумя родительскими divs

Фон: Я строю сетку, используя рамку Backbone.MarionetteJS. Однако я столкнулся с конкретной проблемой, о которой я не знаю, как ее решить.Как охватить дочерний div над двумя родительскими divs

Код: Моя сетка построить так:

<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 droppable gridFields с каждым их собственным идентификатором. Каждое сетевое поле для этого дня может содержать несколько элементов, таких как поле C39.

Проблема: Хотя приведенный выше код работает хорошо, это может происходить подавление, что у меня есть элемент (давайте C92), который не только помещается в gridfield С39 для этого конкретного дня, но и в сетке поля С38. Вместо того, чтобы дважды отображать элемент сетки (один раз в каждом поле сетки), было бы намного опрятно иметь этот элемент для обоих div, чтобы он выглядел как особый элемент, который можно снова и снова перетаскивать и отбрасывать.

Я, однако, не знаю, как этого добиться. Любые советы приветствуются.

источник

2014-02-20 mkoster

Можете ли вы сделать jsFiddle? – Pattle

Я бы с удовольствием, но нет. Мои руки связаны с компанией, для которой я ее строю. Рабочий пример также явно не является ключевым. Я пытаюсь сделать это (или сделать так), что div # c91 не только в # 39, но также в # 38 как «один» элемент. Не два отдельных div. – mkoster

Привет, и простите за мое долгое отсутствие. Ниже вы найдете мой вопрос, реформированный с ответом на мой вопрос.

Этот код представляет собой строку:

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

Строка может иметь несколько collumns, такие как:

<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>

источник

2014-03-12 11:29:10 mkoster

Я не уверен, добавили ли вы эти div по окошкам. Если вы делаете это по скелетным представлениям, каждое представление по умолчанию обернуто «div». Мы можем изменить его, добавив параметр тега. Добавить тег: 'span'

источник

2014-02-20 09:59:08

Да, это то, что я делаю. Это div, которые вы можете видеть выше каждого дня и каждого .gridItem. Я попробую то, что вы сказали, и немного вернемся к этому. – mkoster

Я могу изменить использование div в tag с помощью tagName (нужно было быстро просмотреть документацию). Я все еще не уверен, что делать дальше. Хотя они используют разворот span, а не завернутый div, исходная проблема все еще остается? – mkoster

Я не понял, в чем проблема? можете ли вы объяснить более подробно? –

Как охватить дочерний div над двумя родительскими divs

ответ

Смежные вопросы