jquery - 可拖动的 div 是否可以为真或在另一个 div 上放置时接收值？

Question

我有一个 div，一把 key ，我想用它来打开一扇门，另一个 div。这个可拖动的 div 可以接收一个值吗？ 1 或悬停在锁着的门上时为真？

在这个示例代码中有一个问题。当 goldenKey 得到 mousedown 时，它变为 true。这意味着 if 语句得到满足，无论什么 div 被扔进锁着的门，例如另一个key-div，会提示alert，fadeOut，颜色变化发生。

那么，当 goldenKey 悬停在上锁的门 div 上时，有没有办法让它接收一个值，或者 true/false？还是有另一种更简单的方法来解决我所缺少的这个问题？

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。