3

I googled and found several answers but they was all about click or mousemove events which are not suitable for my question.

Basically I allow users to drag an item from a list and drop it on a folder in another list and I want to highlight element (in the folder list) whenever an item is dragging over it. Listening to mouseenter and mouseleave events on the folder list won't work. I tried with document.elementFromPoint in the dragging event (jQuery UI's Draggable drag) but unfortunately it returns the helper element instead of the element in the folder list. I think it's correct behavior since document.elementFromPoint returns the top most element under mouse cursor. But it doesn't solve my problem :(.

    $("#filelist li").draggable({
        helper: "clone",
        drag: function (event, ui) {
            console.log(event.pageX, event.pageY);

            var element = document.elementFromPoint(event.pageX, event.pageY);

            // element is helper element, instead of actual element under cursor which I want.
        }
    });
    $("#folderlist").droppable({
        drop: function (event, ui) {
        }
    });
    // These mouse events won't be triggered while dragging an item.
    $("#folderlist").on({
        "mouseenter": function (event) {
            this.style.backgroundColor = "#1c70cf";
        },
        "mouseleave": function (event) {
            this.style.backgroundColor = "";
        }
    }, "li");
2
  • what is the #folderlist? you could use the dragover/dragleave events
    – Luizgrs
    Nov 3, 2014 at 10:37
  • @Luizgrs I think I said I wanted to highlight items in the folder list, not folder list element itself. Those events are raised once when mouse enter/leave droppable target.
    – Tien Do
    Nov 3, 2014 at 13:41

1 Answer 1

1

Apparently, the droppable has an hover function. http://jqueryui.com/droppable/#visual-feedback

$("#folderlist").droppable({
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
    }
});

Then add this to your css :

.ui-state-hover
{
    background-color: #1c70cf;
}
3
  • 2
    You can get even more fine-grained control on it with the over event handler. The downside is that in either case, you need to make the #folderlist lis droppable, not the #folderlist
    – blgt
    Nov 3, 2014 at 10:49
  • @Flipke I want to highlight LIs, not UL (a droppable target). And It's not an issue if I make LIs are droppable.
    – Tien Do
    Nov 3, 2014 at 13:35
  • 1
    Well then problem solved, just change to this : $("#folderlist li").droppable instead of $("#folderlist").droppable
    – Flipke
    Nov 3, 2014 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.