2

我有一个可拖动对象的列表和一个可放置的目标。拖动开始时，将创建并呈现包含可放置目标的视图。我在帖子底部附上了一些突出显示所需操作的图像。

问题是 jQuery UI 似乎有一个错误。这篇文章：Droppable items not display hoverClass if they are displayed during drag operation似乎证实了这一信念。

我有这段代码可以启用可拖动性：

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 在渲染期间初始化 droppable：

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

不幸的是，如果在呈现视图时我的可拖动对象已经在拖动——hoverClass 以及“over”事件都会失败。

我想知道是否有任何解决方法？我没有看到一个。

在此处输入图像描述 在此处输入图像描述

4

1 回答 1

1

解决方案是将可拖动元素的“refreshPositions”选项设置为 true。即使 droppable 创建较晚，这也会导致它通知 droppable。

于 2013-10-26T02:52:09.940 回答