sortable - jquery ui draggable resize

似乎不尋常的是，這個bug應該已經很久沒有解決了。 對我來說，這是Safari和Chrome（即webkit瀏覽器）的問題，但不是在IE7 / 8/9和Firefox上都可以正常工作。

我發現設置絕對或固定，有或沒有！重要的，沒有幫助，所以最後我添加了一條線到我的拖動處理函數：

ui.position.top += $( 'body' ).scrollTop();

我期待著需要使webkit特定的那一行，但好奇地它在任何地方都能正常工作。 （預計我很快會發表評論，說'呃不，實際上它搞砸了所有其他瀏覽器'。）

在適應了我所讀到的所有問題後，這對我來說很有用。

$(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;

確定滾動元素的位置，並在每次移動/拖動時將其添加到幫助器的位置。

希望能幫助某人，因為我在這個時候浪費了大量時間。

我並不完全相信這在任何情況下都能正常工作，但是這種解決方法我只是在所有需要測試的各種情況下為我工作（以及以前提出的解決方案在這里和其他地方均未通過）

(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年前的bug最終能夠得到糾正，它將會很酷：/）

我刪除了溢出：

html {overflow-y: scroll; background: #fff;}

它非常完美！

我在這裡嘗試了各種答案，包括更新jQuery，發現這對我有用。 我測試了最新的Chrome和IE。 我想這將是一個問題，根據你的用戶界面佈局不同的解決方案。

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

我所做的是：

$("#btnPageBreak").draggable(
        {
          appendTo: 'body',
          helper: function(event) {
            return '<div id="pageBreakHelper"><img  id="page-break-img"  src="page_break_cursor_red.png" /></div>';
          },
          start: function(event, ui) {
          },
          stop: function(event, ui) {
          },
          drag: function(event,ui){
            ui.helper.offset(ui.position);
         }
        });

我有類似的問題，只有在Windows 8上運行特定的IE 10。所有其他瀏覽器工作正常。 刪除cursorAt：{top：0}解決了這個問題。

我設法解決同樣的問題，添加display: inline-block拖動項目

添加position: relative沒有為我工作（jQuery覆蓋它與position: absolute拖動開始）

使用的jQuery版本：

• jQuery - 1.7.2
• jQuery UI - 1.11.4

為什麼不採取光標位置？ 我使用可排序的插件，並使用此代碼修復它：

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

看起來這個錯誤經常出現，並且每次都有不同的解決方案。 以上都沒有，或者我在互聯網上找到的其他東西都能工作。 我正在使用jQuery 1.9.1和JQuery UI 1.10.3。 這是我如何解決它的：

$(".dragme").draggable({
  appendTo: "body",
  helper: "clone",
  scroll: false,
  cursorAt: {left: 5, top: 5},
  start: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  },
  drag: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  }
});

適用於FF，IE，Chrome，我還沒有在其他瀏覽器中測試過。

這個解決方案在不調整任何東西的位置的情況下工作，你只需克隆元素並使其絕對定位。

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

助手可以是一個需要返回DOM元素拖動的函數。

這個錯誤已經轉移到http://bugs.jqueryui.com/ticket/6817 ，並且在大約5天前（2013年12月16日或之前）似乎最終得到修復。 現在的建議是使用http://code.jquery.com/ui/jquery-ui-git.js的最新開發版本，或等待版本1.10.4，它應該包含此修復程序 。

編輯：看來這個修補程序現在可能是bugs.jqueryui.com/ticket/9315一部分，它不會安排在版本1.11之前刪除。 使用上面鏈接的jQuery源代碼控製版本似乎解決了我和@Scott Alexander的問題（下面的評論）。

這對我有效：

start: function (event, ui) {
   $(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
   var st = parseInt($(this).data("startingScrollTop"));
   ui.position.top -= st;
},