I'm trying to make a demo with visual feedback. A draggable element has to be dropped on a droppable element. This works perfectly with the inserted jquery and jquery-ui script.
My question:
I want to add a visual feedback by adding a mouseenter and mouseleave on this object (dragenter or dragover isn't supported within edge so thats no option). Because i'm dragging an image the droppable element doesn't fire the mouse events since there is simply a image inbetween them.
How can I make the droppable object see the mouse and still work when dropped?
sym.$("pdf_file").draggable({
opacity: 0.40,
revert: "invalid",
});
sym.$("droppable_object_01").droppable({
accept: sym.$("pdf_file"),
drop: function(){
sym.play('start_drag_pdf_01');
}
});
sym.play('mouse_enter').css({
'opacity': 0.99,
});
sym.play('mouse_leave').css({
'opacity': 0.00
});
Thanks
jQuery-ui's draggables have the over
and out
events that you can use:
sym.$("droppable_object_01").droppable({
over: function() {
// Run any code when the draggable is dragged over the droppable
},
out: function() {
// Run any code when the draggable is dragged out of the droppable
}
});
Here is an example: https://jsfiddle.net/5jtoawp8/
More information in the docs .
<script src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#dvRestrictedArea").mouseenter(function () {
alert("Mouce Enter into Restricted Area");
});
$("#dvRestrictedArea").mouseleave(function () {
alert("Mouce leave from Restricted Area");
});
});
</script>
Thanks... :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.