jQuery Draggable показывает помощник в неправильном месте после прокрутки страницы

Question

Я использую jQuery draggable и droppable для разрабатываемой системы планирования работы.Пользователи перетаскивают задания на другой день или пользователя, а затем данные обновляются с помощью вызова ajax.

Все работает нормально, за исключением случаев, когда я прокручиваю главную страницу (задания появляются на большом недельном планировщике, который превышает дномоего окна браузера).Если я попытаюсь перетащить сюда перетаскиваемый элемент, он появится над моим курсором мыши с тем же количеством пикселей, что и при прокрутке вниз. Состояние наведения по-прежнему работает нормально, а функциональность включена, но выглядит неправильно.

Я использую jQuery 1.6.0 и jQuery UI 1.8.12.

Я уверен, что мне нужно добавить функцию смещения, но я не знаю, где ее применить,или если есть лучший способ.Вот мой .draggable() код инициализации:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

Есть идеи, что я могу сделать, чтобы это исправить?

Answer 1

Мне удалось исправить ту же проблему с добавлением display: inline-block на перетаскиваемые предметы

Добавление position: relative не работает для меня (jQuery переопределяет его с position: absolute при запуске перетаскивания)

Используемые версии jQuery:

• jQuery - 1.7.2
• jQuery UI - 1.11.4

Answer 2

Это, кажется, делает обходной путь без необходимости использовать положение: абсолютное в родительском:)

$("body").draggable({
     drag: function(event, ui) { 
         return false; 
     } 
});

Answer 3

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

(function($){
$.ui.draggable.prototype._getRelativeOffset = function()
{
    if(this.cssPosition == "relative") {
        var p = this.element.position();
        return {
            top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/,
            left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/
        };
    } else {
        return { top: 0, left: 0 };
    }
};
}(jQuery));

(я отправил его на трекер jQuery.ui, чтобы узнать, что они об этом думают ... было бы здорово, если бы эта 4-летняя ошибка была наконец исправлена: /)

Answer 4

Это то, что у меня сработало, после адаптации всего, что я прочитал по проблеме.

$(this).draggable({
  ...
  start: function (event, ui) {
    $(this).data("scrollposTop", $('#elementThatScrolls').scrollTop();
    $(this).data("scrollposLeft", $('#elementThatScrolls').scrollLeft();
  },
  drag: function (event, ui) {
    ui.position.top += $('#elementThatScrolls').scrollTop();
    ui.position.left += $('#elementThatScrolls').scrollLeft();
  },
  ...
}); 

* elementThatScrolls - родитель или предок с переполнением: auto;

Определяет положение элемента прокрутки и добавляет положение помощника при каждом его перемещении / перетаскивании.

Надеюсь, это кому-нибудь поможет, так как я потратил на это много времени.

Answer 5

Я использую JQuery, перетаскиваемый в Firefox 21.0, и у меня та же проблема.Курсор остается на дюйм выше вспомогательного изображения.Я думаю, что это проблема в самом Jquery, которая до сих пор не решена.Я нашел обходной путь к этой проблеме, который использует свойство cursorAt перетаскиваемого объекта.Я использовал его следующим образом, но это можно изменить в соответствии с его требованиями.

$('.dragme').draggable({
helper: 'clone',    
cursor: 'move',    
cursorAt: {left: 50, top: 80}
});

Примечание: Это будет применимо для всех браузеров, поэтому после использования этого кода проверьте свою страницу во всех браузерах, чтобы получить правильные левую и верхнюю позиции.

Answer 6

Я использую липкую навигацию вверху и подумал, что именно из-за этого возникает проблема с прокруткой, которая возникает у всех остальных. Я попробовал идею всех остальных с помощью cursorAt, я попытался сдержать, и ничего не получилось, КРОМЕ этого не устраняло мое переполнение HTML в CSS! Безумно, как маленький CSS все испортит. Это то, что я сделал, и это работает как шарм:

html {
  overflow-x: unset;
}

body {
  overflow-x: hidden;
}

Answer 7

Используйте appendTo: "body' и установите положение с помощью cursorAt.Это прекрасно работает для меня.

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'

Answer 8

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

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}

Answer 9

Я попробовал различные ответы здесь, включая обновление jQuery, и обнаружил, что это работает для меня.Я проверил это на последнем Chrome и IE.Я думаю, что это будет проблемой с различными решениями в зависимости от вашего макета пользовательского интерфейса.

$('{selector}').draggable({
    start: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    },
    drag: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    }
});

Answer 10

У меня была похожая проблема, только с определенным IE 10, работающим на Windows 8. Все остальные браузеры работали нормально. Удаление cursorAt: {top: 0} решило проблему.