Я пытаюсь реализовать «мульти» пример на этой странице... http://rubaxa.github.io/Sortable /а> . Я чувствую, что «воссоздал» структуру и соответствующие параметры, как указано на https://github.com/RubaXa/Sortable , но я изо всех сил пытаюсь заставить это работать так, как я хочу.
упрощенная версия того, что я пытаюсь сделать, находится здесь... https://jsfiddle.net/uqcqufo8/ а>
HTML...
<div id="multi">
<div><div data-force="5" class="layer title title_xl">Multi</div></div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group A</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group c</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group b</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
</div>
JavaScript...
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
По сути, большие серые квадраты должны быть сортируемыми (как они есть), но и цветные квадраты также должны быть сортируемыми — они должны сортироваться внутри своих отдельных блоков и перетаскиваться из одного серого блока в другой. Я не вижу, что мне не хватает. Спасибо.