1

我在下面有这段代码，当您开始拖动可拖动元素时，它会将一个充满可放置元素的 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')对象进行动画处理，我不知何故需要可拖动对象来识别可放置对象已移动。

谁能告诉我如何做到这一点或其他一些解决方案？

4

1 回答 1

0

是的（为时已晚 4 年），添加refreshPositions: true,到$('.sdPlayer').draggable({将使其解决。

我花了很长时间才弄清楚这一点。

于 2016-07-14T15:03:34.997 回答