javascript - ドラッグ可能な要素がドロップ可能な境界の前にドラッグされている場合、オーバー/アウトが発生しないjQuery UIのドロップ可能なバグを回避する方法

Question

ドラッグ可能なオブジェクトとドロップ可能なターゲットのリストがあります。ドロップ可能なターゲットを格納するビューは、ドラッグの開始時に作成およびレンダリングされます。投稿の下部に、目的のアクションを強調する画像をいくつか添付しました。

問題は、jQuery UI にバグがあるように見えることです。この投稿:ドラッグ操作中に表示されるドロップ可能なアイテムが hoverClass を表示しないことは、その信念を裏付けているようです。

ドラッグ可能性を有効にする次のコードがあります。

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");

    }
});

私のプログラムには、ビデオ検索結果が選択されるためのイベント リスナーがあります。いずれかが選択されると、「AddItems」ビュー自体がレンダリングされ、遷移します。

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 は、レンダリング中にドロップ可能を初期化します。

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

残念ながら、ビューがレンダリングされたときにドラッグ可能オブジェクトが既にドラッグされている場合、hoverClass は「over」イベントと同様に失敗します。

これに対する回避策があるかどうか疑問に思っていますか？見当たりません。