Jquery сортируемые элементы выделяются при перетаскивании

Question

Я пытаюсь внедрить сортировку jquery на моем веб-сайте, но она имеет странное поведение. Когда я пытаюсь перетащить элемент на другую позицию, другие элементы выделяются, поэтому мне было интересно, может ли кто-нибудь объяснить мне, почему это происходит?

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="sortable"> 
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">

</div>

Answer 1

уберите ширину и высоту из изображений и используйте дополнительно этот css:

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#sortable img {
  margin: 3px 3px 3px 0;
  padding: 1px;
  float: left;
  width: 100px;
  text-align: center;
}

посмотрите на это: https://jsfiddle.net/r1tzswkL/6/