带rubaxa的可排序Javascript
我正在尝试实现这个页面上的“多”示例。我觉得我已经“重新创建”了上所述的结构和适当的选项,但我正在努力使其按我所希望的方式运行 我要做的事情的简化版本在这里 HTML带rubaxa的可排序Javascript,javascript,jquery-ui-sortable,rubaxa-sortable,Javascript,Jquery Ui Sortable,Rubaxa Sortable,我正在尝试实现这个页面上的“多”示例。我觉得我已经“重新创建”了上所述的结构和适当的选项,但我正在努力使其按我所希望的方式运行 我要做的事情的简化版本在这里 HTML <div id="multi"> <div><div data-force="5" class="layer title title_xl">Multi</div></div> <div class="layer tile" data-force="30
<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"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});