JQuery UI получить идентификатор сбрасываемого элемента, когда упал элемент

Question

Как мы получаем идентификатор сбрасываемого элемента, когда уронили предмет? Здесь я использую jquery ui и asp.net mvc.

 <table id="droppable">
    <tr>
    <td style="width:300px;height:50px">Backlog</td>
    <td style="width:300px;height:50px">Ready</td>
    <td style="width:300px;height:50px">Working</td>
    <td style="width:300px;height:50px">Complete</td>
    <td style="width:300px;height:50px">Archive</td>
    </tr>
        <tr id="cart">
        <td id="BackLog" class="drag"  style="width:120px;height:50px;">

         <img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" />

        </td>
            <td id="Ready"  class="drag"  style="width:140px;height:50px">


            </td>
            <td id="Working" class="drag"  style="width:140px;height:50px">

            </td>
            <td id="Complete" class="drag" style="width:140px;height:50px">


            </td>
            <td id="Archive" class="drag" style="width:140px;height:50px">

            </td>
        </tr>
    }
   </table> 

Здесь я хочу переместить изображение в первом столбце в другой столбец и получить идентификатор этого столбца. Для перетаскивания я использую скрипт

<script type="text/javascript">
    $(function () {
        $(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
        $("#droppable").droppable({
            drop: function (event, ui) {                                      
                $.ajax({
                    type: "POST",
                    url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") ,
                    success: function (data) {
                        $('.result').html(data);
                    }
                });
            }
        });
    });
</script>

Answer 1

Чтобы получить идентификатор как перетаскиваемого, так и сбрасываемого элемента, используйте следующее:

$('.selector').droppable({ drop: Drop });

function Drop(event, ui) {
  var draggableId = ui.draggable.attr("id");
  var droppableId = $(this).attr("id");
}

Извините, возможно, вы немного опоздали, но я только начал использовать jquery и нуждался в точном.

Answer 2

Руководство пользователя API-интерфейса интерфейса пользователя jQuery описывает, как получить "drop-on-droppable" очень "тайно" в секции опции greedy :

event.target можно проверить, чтобы узнать, какой сбрасываемый объект получил перетаскиваемый элемент

Но учтите, что event.target содержит только элемент DOM ...

Ответ на ваш вопрос

Вы сможете получить идентификатор в вашем droppable обратном вызове drop через первый параметр event.

Pure JS

Свойство: event.target.id - если идентификатор не задан: пустая строка ""
Атрибут: event.target.getAttribute('id') - , если идентификатор не задан: ноль

jQuery

Свойство: $(event.target).prop('id') - , если идентификатор не установлен: пустая строка ""
Атрибут: $(event.target).attr('id') - , если идентификатор не установлен: undefined

Использование Пример

<script>
$(function(){
    $(".droppablesSelector").droppable({
        drop: function (event, ui) {                                      
          //display the ID in the console log:
          console.log( event.target.id );
        }
    });
});
</script>

Дополнительная информация

Событие
Система событий jQuery нормализует объект события accorв соответствии со стандартами W3C.
Объект события гарантированно будет передан в обработчик события (проверки для window.event не требуются).Он нормализует свойства target , relatedTarget, metaCey и pageX / Y и предоставляет методы stopPropagation () и warnDefault ().

Answer 3

Вы подключаете событие "drop" и запрашиваете элемент, который вы только что сбросили. Элемент, являющийся параметром "ui" в функции ниже

$( ".selector" ).droppable({
   drop: function(event, ui) { ... }
});

Ознакомьтесь с документацией .