Блог

У меня на странице есть несколько компонентов, которые можно перетаскивать. У них есть возможность перетаскивания класса. Когда это перетаскивается и останавливается, мне нужно получить левую и верхнюю позиции

         function init() {
            var p = $('#groups-parent');
            $('.draggable').draggable({
                obstacle: ".obstacle",
                preventCollision: true,
                containment: [
                    p.offset().left, p.offset().top, p.offset().left   p.width() - 225, p.offset().top   p.height() - 50
                ], 
                start: function(event, ui) {
                    $(this).removeClass('obstacle');
                },
                stop: function (event, ui) {
                    console.log(ui);
                    $('#groups-parent').css({ 'min-height': Math.max(500, ui.position.top   50) });
                    $(this).addClass('obstacle');
                    
                    getTopLeftPosition();
                }
            });  
        }
 

Вот моя функция, которая должна получить левую и верхнюю позиции.

         function getTopLeftPosition(e) {
            var coordX = e.pageX - $(this).offset().left,
                coordY = e.pageY - $(this).offset().top;

            alert(coordX   ' , '   coordY);
        }
 

Это не работает. Все, что я получаю в своем браузере, — это это сообщение об ошибке

Не удается прочитать свойства неопределенного (чтение «слева»)

Как я могу получить эту левую и верхнюю позиции? В предупреждении должно быть указано на это.

Вам, вероятно, просто нужно привязаться this к функции, изменив

 getTopLeftPosition();
 

к любому

 getTopLeftPosition.call(this, event);
 

или

 getTopLeftPosition.bind(this)(event)