触发jQuery UI放下事件而无需离开鼠标

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');
    }
  });
});

现在您不能“丢掉”您的物品，并且不会触发掉落。