Muuri初始化报错：Uncaught Error: No valid child element found within item element

报错信息 #

Uncaught Error: No valid child element found within item element. error at "dropzones"

问题根源 #

这个错误的核心是你错误地将.drop-zone元素同时用作了两类Muuri实例的载体：

1. 你遍历所有.drop-zone元素，给每个元素单独创建Muuri实例（new Muuri(area, {...})），但.drop-zone内部没有任何符合Muuri要求的子元素（Muuri网格容器必须包含可识别的子项元素），这本身就不符合Muuri的使用逻辑。
2. 后续你又以.drag-options-container为容器创建dropzones实例，并指定itemSelector: '.drop-zone'，此时.drop-zone已经被之前的Muuri实例占用，无法再被识别为新网格的子项，导致报错。

简单来说：.drop-zone应该是父容器.drag-options-container对应Muuri网格的子项，而非独立的网格容器。

修复方案 #

删掉遍历.drop-zone创建Muuri实例的冗余代码，仅保留以.drag-options-container为容器的dropzones实例，并将原事件绑定到该实例上即可。

修正后的代码 #

JavaScript代码

var boardGrid, dropzones;
var dropzonecon = document.querySelector('.drag-options-container');
// 声明拖拽信息存储变量，避免未定义错误
var itemDrag = {};

// 仅创建一个Muuri实例，以父容器为载体，.drop-zone为子项
dropzones = new Muuri('.drag-options-container', {
  itemSelector: '.drop-zone',
  layoutDuration: 400,
  layoutEasing: 'ease',
  layoutOnResize: true,
  dragSortInterval: 0,
  dragReleaseDuration: 400,
  dragReleaseEasing: 'ease',
  dragEnabled: true,
  dragContainer: dropzonecon,
  dragRelease: {
    useDragContainer: true,
  },
})
.on('dragReleaseEnd', function(item) {
  debugger
  if (itemDrag.targetGrid) {
    itemDrag.targetIndex = itemDrag.targetGrid.getItems().indexOf(item);
    var months = ["Jan", "Feb", "March", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
    let [day, month, year] = itemDrag.targetGridID.replace(" 00:00:00", "").split('-');
    var dateObj = new Date(+year, +month - 1, +day);
    console.log(dateObj);
    $('.board-item[data-id=' + itemDrag.itemID + ']').find("#date_" + itemDrag.itemID).find("span").html("Due on: " + dateObj.getDate() + " " + months[dateObj.getMonth()] + " " + dateObj.getFullYear());
    UpdateServiceOrder(itemDrag);
    // 若需刷新其他网格，在此处处理
    // dropGrids.forEach(function(droparea) {
    //   droparea.refreshItems();
    // });
  }
  setTimeout(function() {
    document.getElementById('drag-options').style.display = 'none';
  }, 3000);
})
.on('receive', function(data) {
  itemDrag.targetGrid = data.toGrid;
  itemDrag.targetGridID = data.toGrid.getElement().getAttribute('data-id');
});

// 若需存储网格实例到数组，直接push即可
// var dropGrids = [];
// dropGrids.push(dropzones);

HTML代码

（注意后端渲染日期时的双引号需转义，避免破坏HTML结构）

<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.9.5/muuri.min.js" integrity="sha512-OcxD5yMkQtx7+ODJIvypN3ajf/fnpTK1I0+Gmq1O9W8uU16MfTmJ1nBNUJ84WuSBnJmoBSAmgm0ujUikVbRzfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="drag-options-container" id="drag-options" style="display: none; position: fixed; overscroll-behavior:none;bottom: 20px; right: 20px;z-index: 99999;">
  <div class="drop-zone" style="border-top-color:red" data-id="delete">Delete</div>
  <div class="drop-zone" data-id="@DateTime.Today.AddDays(2).ToString(&quot;dd-MM-yyyy&quot;)">In Two Days</div>
  <div class="drop-zone" data-id="@nextMonday.ToString(&quot;dd-MM-yyyy&quot;)">Next Monday</div>
  <div class="drop-zone" data-id="@firstDayOfNextMonth.ToString(&quot;dd-MM-yyyy&quot;)">Next Month</div>
  <div class="drop-zone" style="border-top-color:green" data-id="complete">Done</div>
</div>

额外注意事项 #

• 确保itemDrag变量在合适的作用域中声明，避免未定义错误。
• HTML中后端渲染的日期字符串里的双引号必须转义（"），否则会导致元素结构异常，影响Muuri识别。

内容的提问来源于stack exchange，提问作者DHRUV Mistry