jQuery UI draggable +可排序iframe - 错误的垂直偏移 [英] jQuery UI draggable + sortable in iframe - wrong vertical offset

问题描述

我正在解决这个问题，我不知道该怎么做。

情况：我在页面顶部有可拖动的元素和一些可靠的iframe持有者。当我尝试将元素拖到iframe时，它工作正常。但是，当iframe向下滚动时，我开始拖动可拖动元素，它连接到iframe中的第一个可排序的持有者，而不是目前位于iframe的可见部分顶部的可排序的持有者。

js带有完整的代码： https://jsfiddle.net/0d420qpj/

屏幕视频： http：// screencast -o-matic.com/watch/coltDdhakq

观看视频，您将看到有问题的行动。

$ $ $ $ $$$$$$$$ $ b iframeOffset：$（'＃iframe'）。offset（），
connectToSortable：f.find（。sort_holder），
distance：10，
cursorAt：{left：20 ，顶部：20}，
scroll：true，
start：function（event，ui）{

}，
drag：function（event，ui）{

}，
stop：function（event，ui）{

}
}）;

你能帮我解决这种情况吗？

解决方案

视频被删除，所以mb完全不了解你的问题。
但是如我所见，你的 .drag - 元素只是连接到容器的顶部并滚动它。因此，如果您禁用可拖动和可排序的滚动或降低灵敏度，则问题将消失。

  .sortable（{
 scroll：false 
}）; 
 .draggable（{
 scroll：false 
}）; 
  

https://jsfiddle.net/0d420qpj/4/

或者你可以将draggable元素放在另一个位置（从容器的左边或右边）

更新

好的，我发现这样解决你的问题。它不是那么美丽，但是当滚动被禁用时它起作用。

  $（'＃iframe'）。内容（）。on（'scroll'，function（）{
 $（。drag）。draggable（option，cursorAt，{top：-1 * $（'＃iframe'）。contents（）。scrollTop（）}）; 
}）; 
  

https://jsfiddle.net/dz0orkox/1/

更新2

对于光标的中心对齐，需要从顶部向iframe添加高度。在我们的案例中为60px

  $（'＃iframe'）。contents（）。on（'scroll'，function（） 
 $（。drag）。draggable（option，cursorAt，{top：-1 * $（'＃iframe'）。contents（）。scrollTop（）+ 60}）; 
}）; 
  

https://jsfiddle.net/dz0orkox/3/

I am solving this problem and I do not know what to do.

Situation: I have draggable elements at the top of page and some sortable holders in iframe. When I try to drag element to iframe, it is working fine. But, when iframe is scrolled down and I start dragging draggable element, it connects to first sortable holder in iframe, not to that sortable holder which is currently at top of visible part of iframe.

js fiddle with complete code: https://jsfiddle.net/0d420qpj/

screen video : http://screencast-o-matic.com/watch/coltDdhakq

Watch video and you will see problem in action.

$(".drag").draggable({ 
      helper : "clone",
      iframeFix: $('#iframe'),
      iframeOffset: $('#iframe').offset(),
      connectToSortable : f.find(".sort_holder"),
      distance : 10,
      cursorAt: { left: 20, top : 20},
      scroll : true,
      start: function(event, ui) { 

      },
      drag: function(event, ui) { 

      },
      stop: function(event, ui) { 

      }
    });

Can you please help me solve this situation?

解决方案

The video was deleted, so mb I don't understand your problem completely. But as I see, your .drag-element just connects to top of container and scrolls it. So if you disable scrolling of draggable and sortable or decrease sensitivity, the issue will be gone.

.sortable({ 
    scroll: false
});
.draggable({ 
    scroll: false
});

https://jsfiddle.net/0d420qpj/4/

Or you can place you draggable element to another position (left or right from container).

Update

Ok, I found this way to resolve your issue. It's not so beautiful, but it works when scrolling is disabled.

$('#iframe').contents().on('scroll', function() {
  $(".drag").draggable("option", "cursorAt", { top: -1 * $('#iframe').contents().scrollTop() });
});

https://jsfiddle.net/dz0orkox/1/

Update 2

For center alignment of cursor need to add height from top to iframe. 60px in our case

$('#iframe').contents().on('scroll', function() {
    $(".drag").draggable("option", "cursorAt", { top: -1 * $('#iframe').contents().scrollTop() + 60 });
});

https://jsfiddle.net/dz0orkox/3/

这篇关于jQuery UI draggable +可排序iframe - 错误的垂直偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！