可拖动的 div 可以为真，或者在按住另一个 div 时接收值

Question

我有一个div，一把钥匙，我想用它解锁一扇门，另一个div。当将鼠标悬停在锁定的门上时，这个可拖动的div 是否可以接收值，例如 1 或 true？

此示例代码中存在问题。当goldenKey mousedown时，它变成了true。这意味着if语句得到满足，任何掉入锁门的div，例如另一个键div，都会提示alert、fadeOut和颜色变化发生。

那么，当goldenKey悬停在锁定的门div 上时，有没有办法接收一个值或真/假？还是有没有其他更简单的方法来解决我缺少的这个问题？

.HTML

<div id="container">
   <div class="item" id="goldenKey"></div>
   <div id="door" class="lockedDoor"></div>
</div>

.CSS

#container{
    position:relative;
    width:667px;
    height:375px;
    background-color:#999;
}
.item{
    position:absolute;
}
#goldenKey{
    width:20px;
    height:20px;
    cursor:pointer;
    z-index:10;
    background-color:gold;
    left:230px;
    top:100px;
}
#door{
    position:absolute;
    top:0;
    right:0;
    width:70px;
    height:110px;
    background-color:tomato;
}
.lockedDoor{
    position:relative;
    width:70px;
    height:110px;
    background-color:green;
}

jQuery

$(document).ready(function(){
$('.item').draggable({
    accept: ".item",
    containment: '#container', 
    cursor: 'pointer',
    revert: function(is_valid_drop){
            console.log("is_valid_drop = " + is_valid_drop);
            if(!is_valid_drop){
               console.log("revert triggered");
               return true;
            } else {
                //Other
            }
        }
    });
var goldenKey = false;
$('#goldenKey').mousedown(function(){
    goldenKey = true;
});
    $('.lockedDoor').droppable({
        drop: function(event, ui) {
            if(goldenKey){
                alert ('Door opened');
                $('#goldenKey').fadeOut(500);
                $('#door').css('background-color', 'blue');
            }else{
                alert ('Door locked');
            }
            var $this = $(this);
            $this.append(ui.draggable);
            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;
            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

Answer 1

有一个事件 over（ event， ui ） 特别是在可放置的 jQuery UI 中。

$( ".selector" ).droppable({
  over: function( event, ui ) {}
});

在发布问题之前，应仔细阅读 API。