Следуя примерам, я смог перетащить виджеты между 2 сетками верхнего уровня и создать вложенную сетку, но не объединяя эти 2 вместе. Если это поддерживается
Грустно, но это правда, невозможно . По крайней мере, не с gridstack.
Ключ за этим механизмом перетаскивания выполняется с помощью опции acceptWidgets . Но это не может обрабатывать многоуровневый элемент .grid-stack. Следовательно, появляется ошибка.
Вы можете попытаться изменить скрипт, добавленный во фрагменте, примерно так:
$("#container-stack").gridstack({
acceptWidgets: '.grid-stack-item'
})
Но, к сожалению, это приведет к ошибке , как только вы начнете перетаскивать любой виджет. Но он работает с одноуровневым вложением, что не совсем то, что вы ищете.
В документации также вообще ничего не говорится о перетаскивании вложенных уровней.
Но причина, по которой я предполагаю, что это невозможно, заключается в том, что выпуск , а также этот .
Полагаю, это (почти) именно то, что вы хотели. но нет никакого ответа от любых чиновников. Кроме того, ему три года. Еще один недостаток, который указывает на то, что этот проект умирает, - когда вы пытаетесь получить доступ к некоторым их файлам, таким как script , вы получаете предупреждение безопасности, которое помешало мне добавить этот фрагмент на некоторое время.
Поэтому , если бы я был тобой, я бы пошел на jqueryUI и набрал код пользователя.
Обновление
Вот фрагмент чего-то похожего на то, что вы ожидали, я думаю, дайте мне знать, если это правильно, тогда я улучшу это еще раз, например добавлю изменение размера, привязку к виджетам родного брата и еще несколько вещей:
Еще раз проверьте фрагмент в полноэкранном режиме.
$("#gridThree").draggable({
snap: '#gridTwo',
snapMode: 'inner',
zIndex: 5,
containment: 'parent'
});
$(".widgetInOne, .widgetInTwo, .widgetInThree").draggable({
snap: '#gridOne, #gridTwo, #gridThree',
snapMode: 'inner',
zIndex: false,
stack: 'div',
cursor: 'grab',
// grid: [ 100, 100 ]
});
$("#gridOne, #gridTwo, #gridThree").droppable({
accept: '.widgetInOne, .widgetInTwo, .widgetInThree',
drop: function(event, ui) {
if ($(event.target).find($(event.toElement)).length == 0) {
$(event.toElement).css({
'left': '',
top: ''
});
$(event.target).append($(event.toElement));
}
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#gridOne {
background: #cecece;
width: 40%;
height: 400px;
display: inline-block;
margin-right: 4%;
vertical-align: top;
}
.widgetInOne,
.widgetInTwo,
.widgetInThree {
width: 100px;
height: 100px;
padding: 0.5em;
}
#gridTwo {
background: #bfe9f3;
width: 50%;
height: 400px;
display: inline-block;
margin-left: 4%;
vertical-align: top;
position: relative;
}
#gridThree {
background: #ffdda9;
width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
position: absolute;
right: 100px;
top: 0;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="gridOne">
<div class="ui-widget-content widgetInOne">
<p>One</p>
</div>
</div>
<div id="gridTwo">
<div class="ui-widget-content widgetInTwo">
<p>Two</p>
</div>
<div id="gridThree">
<div class="ui-widget-content widgetInThree">
<p>Three</p>
</div>
</div>
</div>
Несколько заметных вещей здесь:
- Когда вы перетаскиваете виджет в сетку, элемент виджета фактически перемещается в этой сетке (в структуре DOM), поэтому любой зависимый от родителей селектор css может здесь не работать. применять только CSS с классом виджета.
На данный момент виджеты привязываются только к внутренним краям сетки (не к внешней стороне других виджетов), чтобы найти дополнительную проверку: здесь Я не смог найти другой вариант, кроме как используйте // grid: [ 100, 100 ] для этого.
Опция Resizable еще не добавлена, надеюсь, вы можете настроить ее по мере необходимости