当前启动事件触发时，会显示所有隐藏的放置区域。但是我希望只有当被拖动的元素位于具有该隐藏区域的另一个元素上时才会发生这种情况。我无法找到任何会让元素低于被拖拽的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding: 10px 40px;
}
#sortable span {
display: inline-block;
}
#sortable ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sortable ul li {
padding: 10px;
}
#sortable ul ul {
margin: 10px 0 0 10px;
}
#sortable .empy-sortable {
background: #cfffc9;
height: 42px;
border: 1px solid #c5c5c5;
display: none;
}
.ui-sortable-placeholder {
background: #b4fcff;
height: 42px;
border: 1px solid #c5c5c5;
}
.ui-sortable-helper .empy-sortable {
display: none !important;
}
i.fa-arrows {
padding: 3px;
border: 1px solid #c5c5c5;
}
i.fa-arrows:hover {
cursor: pointer;
}
.test {
display: block !important;
border: 10px solid red !important;
}
</style>
</head>
<body>
<div id="sortable">
<ul class="sortable">
<li class="ui-state-default" data-parent-id="0" data-id="1">
<i class="fa fa-arrows"></i>
<span>Cat 1</span>
<ul class="sortable">
<li class="ui-state-default" data-parent-id="1" data-id="2"><i class="fa fa-arrows"></i> <span>Cat 11</span><ul class="sortable empy-sortable"></ul></li>
<li class="ui-state-default" data-parent-id="1" data-id="3">
<i class="fa fa-arrows"></i>
<span>Cat 12</span>
<ul class="sortable">
<li class="ui-state-default" data-parent-id="3" data-id="4"><i class="fa fa-arrows"></i> <span>Cat 121</span><ul class="sortable empy-sortable"></ul></li>
<li class="ui-state-default" data-parent-id="3" data-id="5"><i class="fa fa-arrows"></i> <span>Cat 122</span><ul class="sortable empy-sortable"></ul></li>
<li class="ui-state-default" data-parent-id="3" data-id="6"><i class="fa fa-arrows"></i> <span>Cat 123</span><ul class="sortable empy-sortable"></ul></li>
</ul>
</li>
</ul>
</li>
<li class="ui-state-default" data-parent-id="0" data-id="7">
<i class="fa fa-arrows"></i>
<span>Cat 2</span>
<ul class="sortable">
<li class="ui-state-default" data-parent-id="7" data-id="8"><i class="fa fa-arrows"></i> <span>Cat 2</span><ul class="sortable empy-sortable"></ul></li>
</ul>
</li>
<li class="ui-state-default" data-parent-id="0" data-id="9">
<i class="fa fa-arrows"></i>
<span>Cat 3</span>
<ul class="sortable">
<li class="ui-state-default" data-parent-id="9" data-id="10">
<i class="fa fa-arrows"></i>
<span>Cat 31</span>
<ul class="sortable">
<li class="ui-state-default" data-parent-id="10" data-id="11"><i class="fa fa-arrows"></i> <span>Cat 331</span><ul class="sortable empy-sortable"></ul></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
var $sortable = $('#sortable');
$('.sortable').sortable({
connectWith: '.sortable',
placeholder: 'placeholder',
handle: '.fa-arrows',
helper: 'clone',
//tolerance: 'pointer',
//axis: "y",
//forceHelperSize: true,
//toleranceElement : '>span',
start: function(evt, ui) {
var $item = $(ui.item);
$('#sortable .empy-sortable').css('display', 'block');
var id = $item.data('id');
var parentId = $item.data('parent-id');
//console.log('[moving item with ID '+id+']');
//console.log('[serching item\'s parent with ID '+parentId+']');
// The only way to search for the parent is from the data attribute
var $parent = $sortable.find('li[data-id="'+parentId+'"]');
//console.log('[item parent]');
//console.log($parent);
var $childrenContainer = $parent.find('>.sortable');
var childrenCount = $childrenContainer.find('>li').length;
//console.log('[children container]');
//console.log($childrenContainer);
//console.log('[item\'s parent has '+childrenCount+' children left]');
// This should be 0 but we use 3 instead; what sorcery is this?
if (childrenCount == 3) {
$childrenContainer.addClass('empy-sortable').css('display', 'block');
}
},
stop: function(evt, ui) {
console.log('[stop event]');
var $item = $(ui.item);
var $parent = $item.parent().parent();
var parentId = $parent.is('li') ? $parent.data('id') : 0;
//console.log('[item\'s new parent]');
//console.log($parent);
//console.log('[setting the new data parent attribute with ID '+parentId+']');
// Set the item's new parent ID
$item.data('parent-id', parentId);
// This class is present only if the new parent didn't have children before
$parent.find('>.sortable').removeClass('empy-sortable');
$('#sortable .empy-sortable').css('display', 'none');
},
update: function(evt, ui) {
console.log('[update event]');
},
over: function(evt, ui) {
console.log('[over event]');
console.log($(this), ui);
},
change: function(evt, ui) {
console.log('[change event]');
var $heper = $(ui.helper);
var $prevChildrenContainer = $heper.prev().find('.empy-sortable');
var $nextChildrenContainer = $heper.next().find('.empy-sortable');
//console.log('[previous children container]');
//console.log($prevChildrenContainer);
//console.log('[next children container]');
//console.log($nextChildrenContainer);
if ($prevChildrenContainer.length) {
//$prevChildrenContainer.css('display', 'block');
}
if ($nextChildrenContainer.length) {
//$nextChildrenContainer.css('display', 'block');
}
}
});
});
</script>
</body>
</html>