如果想要避免使用嵌套组件的SortableJS，可以使用事件委托的方式来实现拖拽排序功能。下面是一个示例代码：

HTML:

  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5

JavaScript:

// 获取可排序的父元素
var sortableList = document.getElementById('sortable-list');

// 添加拖拽开始事件监听器
sortableList.addEventListener('dragstart', function(e) {
  // 设置拖拽的数据类型和数据
  e.dataTransfer.setData('text/plain', e.target.id);
});

// 添加拖拽进入事件监听器
sortableList.addEventListener('dragenter', function(e) {
  // 阻止默认行为，允许拖拽
  e.preventDefault();
});

// 添加拖拽结束事件监听器
sortableList.addEventListener('dragover', function(e) {
  // 阻止默认行为，允许拖拽
  e.preventDefault();
});

// 添加拖拽放置事件监听器
sortableList.addEventListener('drop', function(e) {
  // 获取拖拽的数据
  var itemId = e.dataTransfer.getData('text/plain');
  var item = document.getElementById(itemId);

  // 如果有拖拽的数据
  if (item) {
    // 将拖拽的元素添加到目标位置
    sortableList.insertBefore(item, e.target);
  }
});

在上面的示例中，我们将事件监听器添加到父元素上，通过事件委托的方式处理拖拽相关的事件。当拖拽开始时，我们设置了拖拽的数据类型和数据。在拖拽进入和拖拽结束事件中，我们阻止了默认行为，允许拖拽操作。在拖拽放置事件中，我们获取拖拽的数据并将拖拽的元素添加到目标位置。

通过使用事件委托的方式，我们只需要将事件监听器添加到父元素上，而不需要给每个子元素都添加事件监听器，避免了使用嵌套组件的SortableJS。