Question

我试图在此页面上实现“多”示例... 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"
});

基本上，大灰色方块应该是可排序的（因为它们是），但是彩色方块也应该是可排序的 - 它们应该在它们各自的盒子中可以排序，并且它们应该可以从一个灰色盒子拖动到另一个灰色盒子。我没有看到我失踪的东西。感谢。

Answer 1

我将您的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
    });
});

使用rubaxa的可排序Javascript

1 个答案: