可排序的Javascript與rubaxa

我試圖在此頁面上實現「多」示例... http://rubaxa.github.io/Sortable/。我覺得自己已經「重新創建」了https://github.com/RubaXa/Sortable上提出的結構和適當的選項，但我正在努力讓它按照我的意願運作。可排序的Javascript與rubaxa

的什麼，我試圖做的是這裏的簡化版本... 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" 
});

基本上，大的灰色方塊應該可以排序（因爲它們是），但彩色方塊也應該是可排序的 - 它們應該可以在各自的盒子中排序，並且它們應該可以從一個灰色框到另一個。我無法看到我錯過了什麼。謝謝。

來源

2015-04-07 Marek Falkowski

我編輯了你的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 
    }); 
});

來源

2015-05-04 19:15:13 biscuitstack

可排序的Javascript與rubaxa

回答

相關問題