jQuery UI可选滚动助手元素抵消了Firefox问题

I have a problem with a jQuery UI 1.7.2 sortable list in Firefox 3.6, IE7-8 work fine. When I'm scrolled down a bit, the helper element seems to have an offset of the same height that I'm scrolled down from the mouse pointer which makes it impossible to see which item you originally started dragging. How do I fix this or work around the issue? If there is no fix what is a really good alternative drag-able plugin?

我对Firefox 3.6中的jQuery UI 1.7.2可排序列表有问题，IE7-8运行良好。当我向下滚动时，辅助元素似乎有一个相同高度的偏移量，我从鼠标指针向下滚动，这样就不可能看到你最初拖拽的是哪个项目。我如何解决这个问题或解决这个问题?如果没有修复，什么是真正好的可拖放插件?

Here are my initialization parameters for the sortable.

这是sortable的初始化参数。

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

15 个解决方案

#1

I was seeing this issue and was able to solve it by removing the css rule position:relative from one of the containing divs on my page. See also: http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

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

#2

125

If you want to prevent browser sniffing, the CSS only solution is to set the ul or a container style to overflow: auto. If you look at the source through firebug, it's the way jQuery does it in their example.

如果您想防止浏览器嗅探，CSS惟一的解决方案是将ul或容器样式设置为overflow: auto。如果您通过firebug查看源代码，那么jQuery在其示例中就是这样做的。

#3

Using overflow: auto; was not an option for me. I was able to work around this issue with this sort event handler:

使用溢出:汽车;不是我的选择。我可以用这个事件处理器来解决这个问题:

$(...).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'});
        }
    },
    ...
});

It is not perfect, but it doesn't require browser sniffing. Tested in IE8, Chrome and Firefox.

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

Edit: This is using jQuery 1.10.0 and jQuery UI 1.10.3.

编辑:这是使用jQuery 1.10.0和jQuery 1.10.3。

#4

I also had this problem and fixed it with the following code:

我也有这个问题，用下面的代码修复:

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'});
    }
});

I discovered, that there still is a problem if you scroll with your sortable-element. Maybe somebody has a solution for this?

我发现，如果使用sortable元素滚动，仍然存在问题。也许有人能解决这个问题?

UPDATE: The fix is:

更新:解决办法是:

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

But still - if you're leaving the list, the sort-event seems to stop.

但是，如果你要离开列表，排序事件似乎就会停止。

#5

You also need to account for the fact this is specific to firefox, here is the snippet I'm using - I got directed the right way from Harris' solution. I encountered this problem w/o using the helper when the sortable was in a relatively positioned container.

您还需要说明这是firefox特有的事实，这是我正在使用的代码片段——我从Harris的解决方案中找到了正确的方法。当可排序表位于相对位置的容器中时，我使用助手时遇到了这个问题。

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

You could also do this check on the server and then have 2 different calls depending on the browser.

您还可以在服务器上执行此检查，然后根据浏览器有两个不同的调用。

#6

I managed to figure out a fix for this:

我想办法解决这个问题:

$( "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'
});

Basically, you need to listen for the sortable's "start" event to add the browser's current scrollTop() value to the helper's position, and then you need to listen for the sortable's "beforeStop" event, to remove that offset before the item is officially placed back into the list at its new position.

基本上，您需要侦听sortable的“开始”事件，以将浏览器的当前scrollTop()值添加到助手的位置，然后需要侦听sortable的“beforeStop”事件，以便在项目正式地重新放置到列表的新位置之前删除该偏移量。

Hope that's helpful to someone!

希望这对某人有帮助!

#7

I force scrollbars on my site so this scrollable offset problem occurs due to having html { overflow-y: scroll } in my CSS.

我在我的站点上强制滚动条，所以这个可滚动的偏移问题是由于我的CSS中有html {overflow-y: scroll}。

As I turn scrollable on and off, I used the following to get around it. I've only tested it in IE8, FF12 and Chrome...

当我打开或关闭可滚动选项时，我使用下面的代码来绕过它。我只在IE8、FF12和Chrome上测试过。

  turnSortingOnOff:function(e) {
    e.preventDefault();

    if (stopOrdering()) {
      // get rid of the hacky css on the html element
      $('html').css({ 'overflow-y': '' });
      $('html').css({ 'margin-right': '' });

      elmt.sortable('disable');
    }
    else if (startOrdering()) {
      // if the body is smaller than the window
      // then there aren't any scrollbars
      // in which case, add a right hand margin of 16px
      // to the html to prevent the site wobbling
      if ($('body').outerHeight() <= $(window).height()) {
        $('html').css({ 'margin-right': 16 });
      }

      // then override the { overflow-y: scroll }
      // in the css by setting it to a nice, safe inherit
      $('html').css({ 'overflow-y': 'inherit' });

      elmt.sortable('enable');
    }
  }

Obviously it's not bulletproof - if the document size changes while sorting then other things will have to be done. However, in my experience it looks less weird under those circumstances.

显然，这并不是防弹的——如果在排序时文档的大小发生了变化，那么就必须完成其他工作。然而，根据我的经验，在这种情况下，它看起来就不那么奇怪了。

#8

I "fixed" this using newer jQuery/jQuery UI versions.

我使用更新的jQuery/jQuery UI版本“修复”了这个问题。

jQuery 1.8.0
jQuery 1.8.0
jQuery UI 1.8.23
jQuery UI 1.8.23

#9

Setting overflow: auto makes Firefox start the drag with the element under the pointer, but it also prevents autoscroll from working properly. You can see that right in the jQuery Sortable example, if you make the window small enough that scrolling is needed.

设置溢出:自动让Firefox在指针下面的元素启动拖放，但它也会阻止自动滚动正常工作。您可以在jQuery可排序示例中看到这一点，如果您使窗口足够小，需要滚动。

I had overflow: scroll on the html tag, but even removing that and (I think) all the relative containing elements didn't totally solve the problem (meaning the drag starts correctly and autoscroll works). I also tried a mozilla-sniffing patch to _findRelativeOffset (I think that was it), but it didn't help.

我有溢出:在html标记上滚动，但是即使删除它，并且(我认为)所有包含元素的相关元素也不能完全解决问题(这意味着拖动可以正确启动并自动滚动)。我还尝试了一个查找mozilla的补丁_findRelativeOffset(我想应该就是这个)，但是没有任何帮助。

What did help for my use case was just dragging with a clone (helper: 'clone' in the draggable constructor). To make it look like the clone wasn't there, I added start and stop methods that just set the visibilty to hidden and then back.

对我的用例有帮助的是用克隆拖拽(在可拖拽的构造函数中，助手:“克隆”)。为了使它看起来不存在克隆，我添加了start和stop方法，这些方法将visibilty设置为hidden，然后返回。

I would have commented above, but I don't have the points yet.

我本来可以在上面评论的，但是我现在还没有要点。

#10

Had the same problem. In my case it wasnt possible to use the "overflow:auto"-fix. So this is what I did.

有同样的问题。在我的例子中，不可能使用“overflow:auto”-fix。这就是我所做的。

var pos_fixed = 1;        // switch variable (the fix should only be fired ones)
$('.drag').draggable({
 start: function(event, ui){
  pos_fixed = 0;            // we're about to start, set to not fixed yet
 },
 drag: function(event, ui){
  if(pos_fixed == 0){       // check if the fix hasn't been fired for this instance yet
   var help_pos = $(ui.helper).offset().top, // get helpers offset
   targ_pos = $(event.target).offset().top,  // get targets(the dragged elements) offset
   marg = targ_pos-help_pos; // calculate the margin the helper has to have to put it on the same y-position as our target
   $(ui.helper).css('margin-top', marg); // put our helper on the same y-position as the target
   pos_fixed = 1;            // we've fixed it, we don't want it to fire again
  }
 }
});

The fix doesn't care about what browser you are using. It will always make sure that the helper has the same y-offset as the target when the drag starts.

修复不关心您使用的浏览器。它将始终确保在拖动开始时帮助器与目标具有相同的y偏移量。

#11

For future readers with this problem. I upgraded from jqueryui 1.8 to 1.10.3 and the problem was solved with no css fixes.

对于有这个问题的未来读者。我从jqueryui 1.8升级到1.10.3，问题在没有css修复的情况下得到了解决。

http://jqueryui.com/

I also upgraded from jquery 1.8 to 1.10.2

我还将jquery 1.8升级到1.10.2

http://jquery.com/

#12

For future readers I ran into a similar problem where the helper element has an offset when dragging inside the scrolled div of a bootstrap dialog. When releasing the dragged object, the animation sends the dragged helper element towards it's new position without considering the scrolled portion of the page, which gives a confusing feedback to users.

对于未来的读者，我遇到了一个类似的问题，当在引导对话框的滚动div中拖动时，helper元素有一个偏移量。当释放被拖动的对象时，动画将被拖动的helper元素发送到它的新位置，而不考虑页面的滚动部分，这会给用户带来令人困惑的反馈。

In order to keep things working with position:relative and overflow-y:auto in the dialog container, my solution was

为了使事物在位置:相对和溢出:自动在对话框容器中工作，我的解决方案是

1- Add the scrollTop() offset to the margin-top on the helper object in the sort start event;

1-在sort start事件中将scrollTop()偏移量添加到helper对象的边距顶部;

2- remove the margin-top in the beforeStop event

2-删除beforeStop事件中的边缘

This fixed the animation from being off after draging, but the helper object is pushed below the cursor while dragging in the scrolled portion in the page. The last fix is

这修复了拖动之后动画的关闭状态，但是在拖动页面中滚动的部分时，助手对象被推到光标下面。最后一个解决

3- Calculate and set the top property of the helper object while dragging (using the sort event) relative to the pointer and the container offset.

3-在拖动(使用排序事件)到指针和容器偏移量时，计算并设置帮助对象的顶部属性。

$(...).sortable({
...
start: function (event, ui) {  
    ui.helper.css('margin-top', $("#mybootstrap-dialog").scrollTop()); 
},
beforeStop: function (event, ui){ 
    ui.helper.css('margin-top',0); 
},
sort: function(event, ui) {
    var top = event.clientY - $('#my-sortable-ul').offset().top  -  $("#mybootstrap-dialog").scrollTop();
    ui.helper.css({'top' : top + 'px'});
    }
},
...

});

Help this helps

这有助于帮助

#13

To summarize your efforts and provide a completed solution. The following seemed to work for Chrome 40+ and Firefox 30+

总结您的努力并提供一个完整的解决方案。以下内容似乎适用于Chrome 40+和Firefox 30+

var isFirefox = /firefox/.test(navigator.userAgent.toLowerCase());
$('#target').sortable({
    connectWith: '#target-holder .elements',
    handle: ".element-header",
    start: function(ev, ui) {
        if( isFirefox ) {
            ui.item.css('margin-top', $(window).scrollTop() );
        }
    },
    sort: function(ev, ui) {
        if( isFirefox) {
            ui.helper.css({'top' : ui.position.top - $(window).scrollTop() + 'px'});
        } else {
            ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
        }
    },
    beforeStop: function (ev, ui) {
        if( isFirefox ) {
            ui.item.css('margin-top', 0 );
        }
    }
});

#14

-1

My solution: ".sortable" to add the "position: relative"

我的解决方案:”。添加“位置:相对”的可排序的

$(".sortable").sortable({
      sort: function(event, ui) {
           ui.position.top = ui.position.top + $(window).scrollTop();
      },
});

PS used jQuery UI 1.12.0 and jQuery 2.2.4

PS使用jQuery UI 1.12.0和jQuery 2.2.4

#15

-2

sort: function(e, ui){
        var tempVariable = $(ui.item.get(0));
        tempVariable.css('top', (e.clientY)-(tempVariable.css("height").replace("px", "")));
    }

#1

#2

125