0

In these 2 examples the first one work the scond don't.

In the second example I bind dragover and dragleave events to img instead of div but I want to change className for div. The events are correctly detected and no error is raised but div does not change its class.

Where is the problem?

//This work

$(document).ready( function() {
    $("#framedrag").bind("dragover dragleave", function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
        return false;
    });
});
   

//This don't work

$(document).ready( function() {
    $("#dragdrop").bind("dragover dragleave", function(e) {
        e.stopPropagation();
        e.preventDefault();
        $("#framedrag").className = (e.type == "dragover" ? "hover" : "");
        return false;
    });
});
#framedrag
{
   color: #555;
   border: 2px dashed #555;
   border-radius: 7px;
   cursor: default;
}

#framedrag.hover
{
   color: #3fc600;
   border-color: #3fc600;
   border-style: solid;
}
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preview-pane">
    <div id="framedrag">
        <div class="preview-container">
            <img id="dragdrop" src="images/upload-picture.png" class="jcrop-preview" />
        </div>
    </div>
</div>
user2272143
  • 469
  • 5
  • 22
  • Possible duplicate of [jQuery dragenter or dragover to include children](https://stackoverflow.com/questions/26756176/jquery-dragenter-or-dragover-to-include-children) – Difster Aug 01 '17 at 23:12
  • @Difster I have seen this answer but don't help the problem is not the same – user2272143 Aug 01 '17 at 23:28

1 Answers1

0

Try this $("#framedrag").attr("class", e.type == "dragover" ? "hover" : "");

Andrii Starusiev
  • 7,564
  • 2
  • 28
  • 37