jQuery - получить относительную позицию и атрибут отброшенных элементов - PullRequest
Новая
       3

jQuery - получить относительную позицию и атрибут отброшенных элементов

5 голосов
/ 03 января 2011

У меня есть перетаскиваемые элементы, которые могут быть сброшены в областях, где возможно падение. Если элемент отброшен, вызывается функция drop: 

$('#droppable').droppable({
    scope: "items",
    drop: function (event, ui) {
        // this one is called if an element is dropped in this droppable area
    }
});

Мой перетаскиваемый элемент: 

<div class="drag" data-noteid="10">Drag me</div>
...
$('.drag').draggable({
    revert: "invalid",
    scope: "items"
});

Что мне нужно знать, если элемент отброшен, так это значение data-noteid и относительное положение области сбрасывания. Таким образом, если элемент опущен в верхний левый угол, координаты x / y должны быть 0 / 0.

Я создал полный рабочий пример здесь: http://jsbin.com/utivo5/2/

Поэтому обычно я могу получить доступ к таким атрибутам: 

alert($(this).data("noteid"));

alert($(this).position().top);
alert($(this).position().left);

но все, что я получаю в этом случае, это undefined.

Кто-нибудь знает, как я могу получить к ним доступ? Я думаю, это должно быть возможно с event или ui, который является параметром вызываемой функции drop?!

Заранее спасибо и С наилучшими пожеланиями, Тим.

Ответы [ 2 ]

15 голосов
/ 03 января 2011

В этом случае вы хотите, чтобы аргумент ui получил перетаскиваемый объект, а не this, который относится к области сбрасывания, в частности, ui.draggable здесь.В целом это должно выглядеть примерно так: 

drop: function (event, ui) {
  var pos = ui.draggable.offset(), dPos = $(this).offset();
  alert("nodeid: " + ui.draggable.data("noteid") + 
        ", Top: " + (pos.top - dPos.top) + 
        ", Left: " + (pos.left - dPos.left));
}

Для этой позиции нам нужно вычесть верхнюю / левую позицию выпадающего предмета, чтобы получить желаемое значение, то есть dPos над удалением.

Вы можете протестировать свою демонстрацию с приведенными выше изменениями, работающими здесь .

4 голосов
/ 10 июля 2012

Я обнаружил, что вышесказанное не сработало.Не уверен почему - он всегда давал мне X = -7 и Y = 229.

Но это сработало (находится в обработчике функции отбрасывания): 

alert('X pos in drop parent container = ' + (ui.position.top - $(this).offset().top));
...