CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidrag-and-drop
Sean Anderson
Sean Anderson

Reputation: 29271

How to workaround jQuery UI droppable bug where over/out do not fire if draggable element is dragging before droppable bound

I have a list of draggable objects and a droppable target. The view housing the droppable target gets created and rendered when dragging starts. I've attached some images highlighting the desired action to the bottom of the post.

The issue is that jQuery UI appears to have a bug. This post: Droppable items not displaying hoverClass if they are shown during drag operation seems to corroborate that belief.

I have this code which enables draggable-ness:

this.$el.find('.videoSearchResultItem ').draggable({
    helper: function() {

        var helper = $('<span>', {
            text: VideoSearchResultItems.selected().length
        });

        return helper;
    },
    appendTo: 'body',
    containment: 'DOM',
    zIndex: 1500,
    cursorAt: {
        right: 20,
        bottom: 30
    },
    start: function (event, ui) {

        var draggedVideoId = $(this).data('videoid');
        var draggedVideo = VideoSearchResultItems.get(draggedVideoId);
        draggedVideo.set('selected', true);
        $(ui.helper).addClass("ui-draggable-helper");

    }
});

My program has an event listener for a video search result becoming selected. When one becomes selected, the 'AddItems' view renders itself and transitions in.

this.listenTo(VideoSearchResultItems, 'change:selected', function (changedItem, selected) {

    if (selected && this.addItemsView === null) {
        this.addItemsView = new AddItemsView();
        this.$el.append(this.addItemsView.render().el);
        this.addItemsView.show();
    }

});

AddItemsView initializes droppable during render:

this.$el.find('i.droppable').droppable({
    hoverClass: 'icon-drop-hover',
    tolerance: 'pointer'
});

Unfortunately, if my draggable is already dragging when the view is rendered -- hoverClass fails as well as the 'over' event.'

I'm wondering if there's any workaround for this? I don't see one.

enter image description here enter image description here

Upvotes: 2

Views: 903

Answers (1)

Sean Anderson
Sean Anderson

Reputation: 29271

The solution to this was to set the draggable element's "refreshPositions" option to true. This causes it to inform the droppable even if the droppable is created late.

Upvotes: 1

Related Questions