Question

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

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

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

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

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

拖放突出显示

1 个答案: