Установите переменную при падении, используя jquery draggable / droppable

Question

Я работаю над проверкой концепции, которая использует jquery ui, перетаскиваемый / сбрасываемый.

Я ищу способ установить переменную, равную индексу div, который сбрасывается в область отбрасывания. (Скажем, у меня есть div с именами "div0", "div1", "div2" и т. Д.)

Итак, представьте, что код будет выглядеть примерно так:

<div id="div0" class="draggableDiv">some cotent</div>
<div id="div1" class="draggableDiv">more content</div>
<div id="div2" class="draggableDiv">yet more content</div>

<div class="droppableDiv">drop it here</div>

$(document).ready(function() {
    $('.draggableDiv').draggable({helper: 'clone'});
    $('.droppableDiv').droppable({
        accept: '.draggableRecipe',
        drop: function(ev, ui) { 
            ui.draggable.clone().fadeOut("fast", 
            function() { 
                $(this).fadeIn("fast") 
            }).appendTo($(this).empty());
                        // function to set someVar = div[index];
        }
    });
});

Я не уверен, как лучше всего это сделать, поэтому, если у кого-то есть какие-либо предложения, я был бы признателен за некоторые рекомендации.

Спасибо!

Answer 1

<div id="div0" class="draggableDiv">some cotent</div>
<div id="div1" class="draggableDiv">more content</div>
<div id="div2" class="draggableDiv">yet more content</div>

<div id='dropplace' class="droppableDiv">drop it here</div>

<script language='javascript'>

$(document).ready(function() {
    $('.draggableDiv').draggable({helper: 'clone'});
    $('.droppableDiv').droppable({
        accept: '.draggableDiv', //changed this, it was originally 'draggableRecipe'
        drop: function(ev, ui) { 

                //get the index of dropped draggable div
                var divIndex = $('div').index(ui.draggable)
                alert(divIndex) //alert the divIndex to see the result

                ui.draggable.clone().fadeOut("fast", 
                function() { 
                        $(this).fadeIn("fast") 
                }).appendTo($(this).empty());
        }
    });
});
</script>

Протестировал этот, он работает для меня, и надеюсь, будет работать для вас тоже. удачи

Answer 2

После строки drop: function(ev, ui) { добавить:

var droppedId = ui.draggable.attr("id");

После этого droppedId будет одним из ваших div0, div1 или div2 - в зависимости от того, который был отброшен.

Answer 3

Вы должны быть в состоянии проанализировать идентификатор div с помощью

$.droppedItems = {};

var droppedId = $(this).attr('id').replace('droppable', '');
$.droppedItems[droppedId] = ui.draggable.attr('id').replace('div', '');