javascript - 拖放突出显示

Question

我想在我的网站中创建一个功能，该功能将突出显示拖放区域以方便用户。

我找到了一个在 JSFIDDLE 上运行完美的代码。但无法在我的本地服务器上执行任何操作。

我还包含了 java 脚本库，但结果与之前的尝试一样令人失望。我可能会遗漏一些东西。

我还提供了代码处于工作状态的 JSFiddle 链接。

Demo

HTML

<div id='container'><div name='drop' style='display: none;'>DROP HERE</div><div name='drag'>DRAG HERE</div></div>

jQuery

var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($dropTarget.hasClass("highlight"))
        return;

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    if (!$dropTarget.hasClass("highlight"))
        return;

    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});

CSS

#container {
    padding: 10px;
    background: #fdd;
    border: 2px solid #fdd;
}
#container [name=drop] {
    padding: 10px;
    background: #dfd;
    border: 2px solid #dfd;
}
#container [name=drag] {
    padding: 10px;
    background: #ddf;
    border: 2px solid #ddf;
}
.highlight {
    border-color: #fc0;
}

Answer 1

为我工作-

// var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($("#container").hasClass("highlight"))
        return; 

    $("#container").addClass("highlight");
    $("#container").find("[name='drop']").show();
    $("#container").find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    // alert('asdasd');
   if (!$("#container").hasClass("highlight"))
        return; 
    $("#container").removeClass("highlight");
    $("#container").find("[name='drop']").hide();
    $("#container").find("[name='drag']").show();
});

Also in fiddle