javascript - 在响应式环境中使用 jQuery draggable() ……

Question

我正在使用 jQuery UI 的 draggable() 方法制作一个相当典型的图像“显示”效果；我在让它在响应式环境中工作时遇到了很多麻烦:

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

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

同样，您会看到我有一些检查浏览器窗口大小的注释代码:

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

这样做是为了在调整浏览器窗口大小时将可拖动 handle 放到正确的位置，但它破坏了可拖动功能。

我已经尝试了 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)在窗口调整大小时，我用

更改光标的位置

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

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