sortable.jsを使いドラッグ＆ドロップで画像を入れ替えたい

前提・実現したいこと

初心者です。お力を借りたいです。

sortable.js(https://github.com/RubaXa/Sortable)を使い要素をドラッグ＆ドロップで上下に並び替えできるようにしたいと思っております。
jqueryは今回使いません。

発生している問題・エラーメッセージ

下記のコードでドラッグ＆ドロップで移動できました。
しかし、itemクラスの中にimgタグを入れたところ、1などのテキストをおさえるとドラッグ＆ドロップできますが画像をおさえると並び変えることができません。
itemクラスの中であればどこをクリックしてもドラッグ＆ドロップで並び替えできるようにしたいです。

該当のソースコード

html
1<div class="list">
2  <div class="item">1</div>
3  <div class="item">2</div>
4  <div class="item">3</div>
5  <div class="item">4</div>
6</div>

javascript
1let list = document.getElementsByClassName("list")[0];
2Sortable.create(list);

試したこと

https://github.com/RubaXa/Sortableで確認し、オプションのhandleで何とかできるのではないかと考えています

わかりずらい内容かと思いますが、回答お待ちしております。
よろしくお願いします。

行動規範の内容に同意します

回答1件

同様の現象が起こるかどうか試すために下記のコードを入れてみました。
そしたら、画像を入れても、並び替えできちゃいました。

html
1<ul id="list">
2  <li class="item"><img src="http://placehold.jp/e79bf5/ffffff/20x20.png" alt=""/>1</li>
3  <li class="item">2</li>
4  <li class="item">3</li>
5  <li class="item">4</li>
6  <li class="item">5</li>
7</ul>

sass
1body
2  max-width: 1000px
3  margin: 20px auto
4  padding: 0
5
6ul
7  list-style: none
8  padding: 0
9li
10  background: #eee
11  margin: 1px
12  padding: 5px 10px