sortable - jquery ui draggable resize




jQuery可拖動頁面滾動後顯示幫助錯誤的地方 (13)

我正在使用jQuery draggabledroppable放置的工作計劃系統,我正在開發。 用戶將作業拖至不同的日期或用戶,然後使用ajax調用更新數據。

一切工作正常,除了當我向下滾動主頁面(喬布斯出現在超過我的瀏覽器窗口底部的大型星期規劃師)。 如果我嘗試在這裡拖動可拖動的元素,則該元素將出現在我的鼠標光標上方,並顯示與我向下滾動相同數量的像素。懸停狀態仍可正常工作,並且功能很強大,但看起來不正確。

我使用的是jQuery 1.6.0和jQuery UI 1.8.12。

我敢肯定,我需要添加一個偏移量函數,但我不知道在哪裡應用它,或者如果有更好的方法。 這是我的.draggable()初始化代碼:

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

任何想法我可以做什麼來解決這個問題?


似乎不尋常的是,這個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;
},




jquery-ui-draggable