Sotable かつ片方向 DragDrop な 2つのリスト #JavaScript

ある 2つのリスト(ul li) があって、ソートさせたいが、Drag は片方向のみにしたい場合

ただし Drag 可なリストに所属している画像に関しては、双方向ドラッグが可能なものとする。

挙動

汚いコードではあるが。

<!doctype html>
<html lang="ja">
<head>
<style>
ul {margin: 0; padding: 0; list-style-type: none; display: flex;border-left: solid 1px #3dbfb8; }
ul li {padding: 10px 20px; background: #e3f6f5; border: solid 1px #3dbfb8; }
</style>
</head>

<body>
<ul id="listB">
<li>5.ばなな</li>
<li>6.トマト</li>
</ul>

<ul id="listA">
<li class="notDrag">1.りんご</li>
<li class="notDrag">2.ばなな</li>
<li class="notDrag">3.トマト</li>
</ul>
<script src="./js/Sortable.min.js"></script>
<script src="./js/drag.js"></script>
<script>
DropCreate(document.querySelector('#listA'), document.querySelector('#listB'), 'js-remove', '✖' ,'notDrag');
</script>
</body>
</html>'

なお Javscript には「Sortable.js」というライブラリを用いている。並び替えやドラッグでは Jquery よりも使いやすい気がします。

drag.js

function DropCreate(variBox, fixBox, fil,delkey,notDrag){
var delstrap= '<i class="'+fil+'">'+delkey+'</i>';

Array.from(variBox.children).forEach(function(el) {el.innerHTML +=delstrap;});


Sortable.create(variBox, {
  group: {
    name: "share1",   
  },
  filter: '.'+fil,

  onAdd: function (evt) {
    evt.item.innerHTML += delstrap;
  },

onRemove: function (evt) {},
 onFilter: function (evt) { 
 var yesDel = window.confirm('画像を削除しますか'); if(yesDel){evt.item.remove(); }
 },
  animation: 100
});

var editableList = Sortable.create(fixBox, {
  group: {
    name: "share1",
   pull:"clone"
   
  },

  onAdd: function (evt) {   
  if(evt.item.className== notDrag){variBox.appendChild(evt.item);}else{ evt.item.remove();}
},
animation: 100,
});

} //end create fnc