Javascript 拖放高亮显示

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

我找到了一个在JSFIDLE上运行得很好的代码。但无法在本地服务器上执行任何操作

我还包括了java脚本库，但结果和以前的尝试一样令人失望。我可能错过了什么

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

HTML

CSS

为我工作-

// 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();
});

---

欢迎使用堆栈溢出！查看并告诉您在那里看到的错误以及它们指向的行。如果没有错误，请查看浏览器开发工具的“网络”选项卡，查看是否正确加载了所有脚本。jQuery是否包装在文档就绪调用中或加载在文档末尾？此外，JSFIDLE对我没有任何作用（Chrome）。对我也不起作用（safari 6.1.4）但是它在这里工作——Chrome35.0.1916.153和Firefox30

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();
});

#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;
}

// 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();
});