Событие отбрасывания пользовательского интерфейса jQuery сработало, не покидая мышь

Question

в приведенной ниже скрипке, когда я перетаскиваю элемент из сортируемой области в область сброса, а затем перетаскиваю его по области сортировки, не опуская его, если я перетаскиваю его по области сбрасывания, он получает событие сброса, даже если вы этого не сделаете отпустите кнопку мыши! в результате я получаю дублированный элемент: -)
это разумное поведение или ошибка?

$('.sortable').sortable({
  // https://bugs.jqueryui.com/ticket/8135 --> http://jsfiddle.net/petersendidit/gtKtE/277/
  start: function(event, ui) { ui.placeholder.html(' '); },
});
  
$('.dropzone').droppable({
  accept: '.sortable .item',
  drop: function(event, ui) {
		// This is called multiple times.
    // when i drop an item from the sortable to drop zone
    // and then drag this dropped item out of the dropzone and in again,
    // this is fired and item gets dupliate :-)
    console.log('droppable.drop!');
    ui.draggable.remove();
    var dropedItem = ui.draggable.clone();
    dropedItem.appendTo($(this));
    dropedItem.draggable({
      connectToSortable: '.sortable',
    });
  },
  over: function(event, ui) {
    console.log('droppable.over');
  },
  out: function(event, ui) {
    console.log('droppable.out');
  }
});

body {
  background: pink;
  font-family: Helvetica;
}

.sortable {
	font-size: 0px;
	height: auto;
	background-color: red;
	overflow-x: scroll;
  white-space: nowrap;
/*    padding: 4px;*/
}

.item {
	font-size: 13px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: lightgrey;
    display: inline-block;
}

.dropzone {
	margin-top: 10px;
	font-size: 0px;
	background-color: blue;
	min-height: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div class="container">
	
	<div class="sortable">
		<div class="item">Item #1</div>
		<div class="item">Item #2</div>
		<div class="item">Item #3</div>
		<div class="item">Item #4</div>
		<div class="item">Item #5</div>
		<div class="item">Item #6</div>
		<div class="item">Item #7</div>
		<div class="item">Item #8</div>
		<div class="item">Item #9</div>
		<div class="item">Item #10</div>
	</div>

	<div class="dropzone">

	</div>

</div>

jQuery UI 1.12.1
JQuery 3.3.1
скрипка: https://jsfiddle.net/paranic/xpvt214o/362238/

Answer 1

После некоторого тестирования я смог повторить проблему. При перетаскивании из document элемент больше не «присоединяется» к событию mousedown в некотором смысле. drop срабатывает.

Обойти, использовать опцию containment.

Рабочий пример: https://jsfiddle.net/Twisty/fqkmL07x/8/

JavaScript

$(function() {
  $('.sortable').sortable({
    containment: ".container",
    start: function(event, ui) {
      ui.placeholder.html(' ');
    },
  });

  $('.dropzone').droppable({
    accept: '.sortable .item',
    containment: ".container",
    drop: function(event, ui) {
      console.log('droppable.drop!');
      ui.draggable.remove();
      var dropedItem = ui.draggable.clone();
      dropedItem.appendTo($(this));
      dropedItem.draggable({
        connectToSortable: '.sortable',
      });
    },
    over: function(event, ui) {
      console.log('droppable.over');
    },
    out: function(event, ui) {
      console.log('droppable.out');
    }
  });
});

Теперь вы не можете "потерять" свой предмет, и падение не сработает.