Question

我有下面的代码，当你开始拖动一个可拖动的元素时，它会将一个装满了droppables的DIV动画到视图中

    var droptions = {
            accept: '.sdPlayer',
            hoverClass: 'target',
            tolerance: 'pointer',
            drop: function( event, ui ) {
                var songId = (ui.draggable[0].id).substring(3);
                var mixId = (event.target.id).substring(4);
                alert('Song '+songId+' added to mix '+mixId);
            }           
        }
        $('.sdPlayer').draggable({
            revert: true,
            revertDuration: 100,
            distance: 40,
            zIndex: 10, 
            start: function(){
                $('#mix-dropper').animate({top:122},200);
            },
            drag: function(){
                pl.dragging = true;
            },
            stop: function(){
                $('#mix-dropper').delay(500).animate({top:12},300);
                pl.dragging = false;
            }
        });

以及使用droppables创建div的函数：

// Insert user's mixes into #mix-dropper div below header
function mixDropper(){
    $.ajax({
        type: 'GET',
        url: baseURL+"mixes/getmixes/",
        success: function( response ){
            $( '#mix-dropper-mixes' ).html( response ); 
            //make newly appended divs droppable
            $( ".mix-dropper-mix" ).droppable(droptions)
        }
    });
}

我遇到的问题是你必须将拖动拖动到$('#mix-dropper-mix')之前的区域，然后它的父$('#mix-dropper')被设置为动画才能使其正常工作，我不知何故需要拖动它认识到droppable已经移动。

有谁能告诉我这个或其他一些解决方案是如何完成的？

Answer 1

是（已经晚了4年），将refreshPositions: true,添加到$('.sdPlayer').draggable({将会对其进行排序。

我花了很长时间才搞清楚。

jQuery动画可放置元素不动画它的'目标可放置区域'

1 个答案: