在响应式环境中使用 jQuery draggable() ...

Question

我正在使用 jQuery UI 的 draggable() 方法处理相当典型的图像 "reveal" 效果；我在响应式环境中遇到很多问题：

http://codepen.io/ProfessorSamoff/pen/qEaNMM

如您所见，显示功能在全尺寸和浏览器 window 尺寸缩小时都能正常工作。但是当浏览器 window 调整大小时，可拖动手柄并不总是捕捉到正确的位置。（虽然它在单击和拖动时会这样做。）

同样，您会看到我有一些针对浏览器进行检查的注释代码 window 大小：

if($(this).width() != width)
{
}

这可以在调整浏览器大小时将可拖动手柄放到正确的位置 window，但它破坏了可拖动功能。

我已经尝试了 Stack Overflow 上关于 draggable() 和 resizable() 的一些建议，但都没有用。

Answer 1

看这里： http://codepen.io/anon/pen/LEmgBP

javascript现在这样显示：

var $reveal = $(".reveal");
$reveal.draggable({ 
    axis: "x",
    containment: "parent",
    iframeFix: true,
    refreshPositions: true,
    drag: function()
    {
      var position = $(this).position();
      var parentWidth = $(this).parent().width();
      var width = (position.left / parentWidth) * 100
      $(".featured").width(width + "%");
    }
  });

$(window).resize(function() {       
    $reveal.css('left', $(".featured").width()+'px')
});

它并不优雅，但似乎有效。

基本上我做了两件事： 1) 我用 % 设置了 $(".featured") 宽度 2) 在 windows resize 我用

改变光标的位置

$reveal.css('left', $(".featured").width()+'px')

注意：第 2 点是一种解决方法，但我没有找到任何以编程方式移动光标的方法。也许使用库来模拟拖动事件（比如 https://github.com/mattheworiordan/jquery.simulate.drag-sortable.js/blob/master/README.md）你会找到更好的东西

在响应式环境中使用 jQuery draggable() ...

Using jQuery draggable() in a responsive environment…

javascript

jquery

html

css

jquery-ui