拖放高亮显示

Drag and drop highlight

本文关键字：显示 高亮 拖放      更新时间：2023-09-26

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

我找到了一段在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;
}

为我工作-

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

相关文章：