On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area.
I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't seem to work.
Even after including the JavaScript library, the results were still disappointing. Clearly, I must be overlooking something.
If anyone wants to see the functioning code, here is the link to the JSFiddle demo: 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;
}