jQuery UI可排序滚动辅助元素偏移Firefox问题

Question

我在Firefox 3.6中有一个jQuery UI 1.7.2可排序列表的问题,IE7-8工作正常.当我向下滚动一点时,辅助元素似乎有一个与我从鼠标指针向下滚动的高度相同的偏移量,这使得无法看到最初开始拖动的项目.我该如何解决这个问题或解决这个问题？如果没有修复什么是一个非常好的替代可拖动插件？

以下是我的可排序初始化参数.

$("#sortable").sortable( {placeholder: 'ui-state-highlight'  } );
$("#sortable").disableSelection();

Answer 1

如果要阻止浏览器嗅探,CSS唯一的解决方案是将ul或容器样式设置为overflow: auto.如果你通过firebug查看源代码,那就是jQuery在他们的示例中执行的方式.

Answer 2

使用overflow: auto;对我来说不是一个选择.我能够使用此sort事件处理程序解决此问题:

$(...).sortable({
    ...
    sort: function(event, ui) {
        var $target = $(event.target);
        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
            ui.helper.css({'top' : top + 'px'});
        }
    },
    ...
});

它并不完美,但它不需要浏览器嗅探.在IE8,Chrome和Firefox中测试过.

编辑:这是使用jQuery 1.10.0和jQuery UI 1.10.3.

Answer 3

我看到了这个问题,并且能够通过删除css规则位置来解决它:相对于我页面上包含的div之一.另见:http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

Answer 4

我也有这个问题并使用以下代码修复它:

var wscrolltop = 0;
$sortable_elements.sortable({ 
    start: function(event, ui) {
        wscrolltop = $(window).scrollTop();
    },
    sort: function(event, ui) {                   
        ui.helper.css({'top' : ui.position.top + wscrolltop + 'px'});
    }
});

我发现,如果使用sortable-element滚动仍然存在问题.也许有人有解决方案吗？

更新:修复是:

$sortable_elements.sortable({ 
    connectWith: '#personal-favs ul.fitems',
    sort: function(event, ui) {  
        ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
    }
});

但是仍然 - 如果你要离开列表,排序事件似乎停止了.

Answer 5

你还需要考虑这个特定于firefox的事实,这里是我正在使用的片段 - 我从Harris的解决方案中得到了正确的指导.当sortable在相对定位的容器中时,我遇到了这个问题,没有使用帮助器.

  var options = { 
   handle: '.mover', 
   update:updateSorting 
 };
  var userAgent = navigator.userAgent.toLowerCase();
  if(userAgent.match(/firefox/)) {
    options["start"] = function (event, ui) { ui.item.css('margin-top', $(window).scrollTop() ); };
    options["beforeStop"] = function (event, ui) { ui.item.css('margin-top', 0 ); };
  }
  $("#" + list_id+"").sortable(options);
  $("#" + list_id+"").disableSelection();

您也可以在服务器上执行此检查,然后根据浏览器进行2次不同的调用.

Answer 6

我设法解决了这个问题:

$( "items" ).sortable({
start: function (event, ui) {
 if( ui.helper !== undefined )
  ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
},
beforeStop: function (event, ui) {
 if( ui.offset !== undefined )
  ui.helper.css('margin-top', 0);
},
placeholder: 'placeholder-class'
});

基本上,你需要监听sortable的"start"事件,将浏览器当前的scrollTop()值添加到帮助者的位置,然后你需要监听sortable的"beforeStop"事件,在项目正式之前删除该偏移量放回到新位置的列表中.

希望对某人有帮助!