jQuery UI Droppable的stop事件未触发，nextPlayer函数不执行

为什么第一次放置棋子时nextPlayer没被调用？ #

你在初始化#square0的droppable时，错误地把stop事件放到了配置里——jQuery UI的droppable组件根本没有stop这个事件，这个事件属于draggable，所以当你把棋子拖到方块上时，这个事件不会被触发，自然nextPlayer不会执行。

另外，你使用的jQuery UI 1.13.2版本已经废弃了activeClass选项，应该用classes定义hover状态类，和后续代码保持统一。

修改后的代码 #

JavaScript 部分

window.turn = 0

function init_draggable() {
    var params = {}
    params.revert = 'invalid'
    $('#player0').draggable(params)
}
init_draggable()

function init_droppable() {
    var params = {}
    // 替换为droppable的正确触发事件：drop
    params.drop = nextPlayer
    // 改用classes替代废弃的activeClass
    params.classes = { 'ui-droppable-active': 'ui-state-hover' }
    $('#square0').droppable(params)
}
init_droppable()

function nextPlayer() {
    alert('Next Player!')
    $('#player' + turn).draggable('destroy')
    $('#square' + turn).droppable('destroy')
    turn = (turn + 1) % 2

    var params = {}
    params.revert = 'invalid'
    $('#player' + turn).draggable(params)

    params = {}
    params.drop = nextPlayer
    params.classes = { 'ui-droppable-active': 'ui-state-hover' }
    $('#square' + turn).droppable(params)
}

CSS 部分（无需修改）

.player {
    font-size:40px;
    float:left;
}

.square {
    font-size:40px;
    border:1px solid black;
    float:left;
    width:60px;
}
.ui-draggable {
    cursor:pointer
}

HTML 部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="player" id="player0">&#9817;</div>
<div class="square" id="square0">&nbsp;</div>
<br clear="left">
<div class="player" id="player1">&#9823;</div>
<div class="square" id="square1">&nbsp;</div>

关键修改点 #

• 将droppable配置中的stop替换为drop事件，这是droppable组件在元素被成功放置时触发的正确事件。
• 初始化第一个droppable时，用classes替代废弃的activeClass，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者Phillip Senn