一个可拖动的 div 可以是 true 还是在另一个 div 上方时接收一个值？

Question

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

在此示例代码中存在问题。当goldenKey 得到mousedown 时，它变为true。这意味着 if 语句已完成，并且任何 div 放入锁定的门，例如另一个key-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。