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 に答える