我有一个应用程序，该应用程序将使用拖放功能记录足球比赛的统计数据。例如，如果发生目标，我将玩家拖到目标放置区，并将其发布到我的数据库中。 http://channan06.lampt.eeecs.qub.ac.uk/summer2/samplelayout1.php
当我将播放器拖到主页放置区上方时，我希望可拖动对象出现在放置区上方，这在主页放置区上可以正常工作，但是当我拖动离开放置区时，可拖动对象出现在放置区后面。谁能说明为什么会这样？
这是文件中的代码，我尝试过尽量减少代码。
<body>
<div class="container">
**<div class="col-sm-2">
<h4>HOME</h4>
<div id="drop_zone1" name="Home Goal dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Goal </p></div>
<div id="drop_zone3" name="Home Point dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Point </p></div>
<div id="drop_zone5" name="Home Wide dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Wide </p></div>
<div id="drop_zone7" name="Home Kickout dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Kickout Won </p></div>
<div id="drop_zone9" name="Home Turnover dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Turnover Won </p></div>
<div id="drop_zone11" name="Home Fouls dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Foul Conceded </p></div>
</div>**
<div class="col-sm-8">
<div class="" style="text-align:center;">
<img id="<?php echo "".$gk;?>" name="1" src="images/jersey.png" class="objects"></img><br/>
<img id="<?php echo "".$rcb;?>" name="2" src="images/jersey2.png" class="objects"></img>
<img id="<?php echo "".$fb;?>" name="3" src="images/jersey3.png" class="objects"></img>
<img id="<?php echo "".$lcb;?>" name="4" src="images/jersey4.png" class="objects"></img><br/>
<img id="<?php echo "".$rhb;?>" name="5" src="images/jersey5.png" class="objects"></img>
<img id="<?php echo "".$chb;?>" name="6" src="images/jersey6.png" class="objects"></img>
<img id="<?php echo "".$lhb;?>" name="7" src="images/jersey7.png" class="objects"></img><br/>
<img id="<?php echo "".$mf1;?>" name="8" src="images/jersey8.png" class="objects"></img>
<img id="<?php echo "".$mf2;?>" name="9" src="images/jersey9.png" class="objects"></img><br/>
<img id="<?php echo "".$rhf;?>" name="10" src="images/jersey10.png" class="objects"></img>
<img id="<?php echo "".$chf;?>" name="11" src="images/jersey11.png" class="objects"></img>
<img id="<?php echo "".$lhf;?>" name="12" src="images/jersey12.png" class="objects"></img><br/>
<img id="<?php echo "".$rcf;?>" name="13" src="images/jersey13.png" class="objects"></img>
<img id="<?php echo "".$ff;?>" name="14" src="images/jersey14.png" class="objects"></img>
<img id="<?php echo "".$lcf;?>" name="15" src="images/jersey15.png" class="objects"></img>
</div>
<div class="" style="text-align:center;">
<h5>Subs</h5>
<img id="<?php echo "".$sub1;?>" name="16" src="images/jersey16.png" class="objects"></img>
<img id="<?php echo "".$sub2;?>" name="17" src="images/jersey17.png" class="objects"></img>
<img id="<?php echo "".$sub3;?>" name="18" src="images/jersey18.png" class="objects"></img>
<img id="<?php echo "".$sub4;?>" name="19" src="images/jersey19.png" class="objects"></img>
<img id="<?php echo "".$sub5;?>" name="20" src="images/jersey20.png" class="objects"></img>
<img id="<?php echo "".$sub6;?>" name="21" src="images/jersey21.png" class="objects"></img>
</div>
</div>
**<div class="col-sm-2">
<h4>AWAY</h4>
<div id="drop_zone2" name="away goal dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Goal </p></div>
<div id="drop_zone4" name="away point dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Point </p></div>
<div id="drop_zone6" name="away Wide dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Wide </p></div>
<div id="drop_zone8" name="away Kickout dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Kickout Won </p></div>
<div id="drop_zone10" name="away Turnover dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Turnover Won </p></div>
<div id="drop_zone12" name="away Fouls dropzone" class="d-inline">
<p style="text-align:center; margin-top:25px;">Foul Conceded </p></div>
</div>**
</div>
</div>
</body>
这是拖放功能的jquery代码。忽略ajax请求
<script>
$( function() {
$( ".objects" ).draggable({ revert:true });
$( "#drop_zone1" ).droppable({
classes: {
"ui-droppable-active": "ui-state-active",
"ui-droppable-hover": "ui-state-hover"
},
drop: function( event, ui ) {
$( this )
var player=$(ui.draggable).attr('id');
var fixture= "1"
var team="1";
var opposition="1";
var kickout='2';
$.ajax({
url: 'awayservera.php',
type: 'POST',
data: 'player='+player+'&kickout= '+kickout+'&fixture= '+fixture+'&team= '+team+'&opposition= '+opposition,
dataType: 'html'
})
}
});
} );
</script>