jQuery UI с възможност за пускане/плъзгане

Ето го моят JS Fiddle.

В JS Fiddle има 3 Droppables в div, наречен „droppables“ и 3 Draggables в div, наречен „draggables“. Можете да плъзнете всеки от обектите за плъзгане върху всеки от обектите за пускане и той ще актуализира съответния div с данните.

    $(this).text('');
    $('#div1_value').text(ui.draggable.data('object'));
    $(ui.draggable).appendTo(this);

Също така ви е позволено да „презаписвате“ чрез плъзгане на плъзгащ се върху пускащ се, като вече има плъзгащ се. Това ще добави стария плъзгащ се обратно към списъка с плъзгащи се.

if(counter != 1)
        {
            $(this).find('.ui-draggable').appendTo($('#draggables'));
            counter = 1;
        }

Тук обаче е проблемът. Ако трябваше да плъзнете dragdable от един droppable в друг, ще забележите, че стойността на div, която сега е технически нулева и недействителна, все още ще показва стойността на стария dragdable.


html jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
person TaylorM    schedule 11.01.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Добре, втори опит.

Трябва да използвате функцията start и stop на draggable: http://api.jqueryui.com/draggable/#event-start

Когато се случи стартовото събитие, ui.helper е новият временен обект, който се влачи, докато ui.helper.prevObject е предишният обект, все още в позицията си.

Когато се случи събитието за спиране, ui.helper все още е временният обект, който се влачи, а ui.helper.prevObject е новият обект, който предстои да се приземи (знам, че е малко объркващо, тъй като се нарича prevObject, но изглежда така работи).

Обърнете внимание, че prevObjects са в "правилната" позиция и в двата случая, така че можете да ги използвате, за да намерите правилния контейнер за пускане и да актуализирате броячите, текста и всяка друга операция за "почистване", която може да се наложи да направите.

Предлагам в стартовото събитие да подготвите някои глобални променливи с всичко необходимо, за да извършите почистването, ако draggable бъде пуснат в различен droppable, но да забавите действителното почистване до stop събитието (проверете преди това дали наистина е необходимо ).

Трябва да използвате събитието out в droppable: http://api.jqueryui.com/droppable/#event-out за прихващане, когато някой от вашите плъзгащи се напусне пускащия.

Ще имам код за вас след минута.

person A. Rama    schedule 11.01.2015
comment
Следващият ми въпрос би бил как да получа достъп до „#DIV1_Value“ в рамките на събитието за стартиране и изпускане? - person TaylorM; 12.01.2015
comment
Бърках със събитие за стартиране и пускане през последния ден и не стигнах доникъде. - person TaylorM; 13.01.2015