拖动元素

Question

我只是想知道是否有可能将图像/元素拖动到最左边并从屏幕右侧进入拖动图像/元素（无论是否在div内） - 因此拖动图像/元素留下来得到相同的结果，反之亦然。

与谷歌地图相似（在缩放级别1），用户可以连续向左或向右拖动图像，这些图像是连续循环的。

如果是这样，您建议使用哪种语言？ JavaScript的？

我希望这是有道理的。

非常感谢

Answer 1

这当然可以使用Javascript。只需要有两个图像副本，当您向左滑动图像时，将第二个副本移动到右侧。 （反之亦然，如果向右滑动）。

Answer 2

您可以向拖动时执行代码的任何元素（包括图像）添加事件处理程序。我为没有提供完整的工作解决方案而道歉，我时间紧迫，我希望这有助于作为一个起点

var myGlobals = {
  state: {
    dragging: false;
  }
};

$('.carouselImg').on('mousedown', function(e){
  myGlobals.state.dragging = true;
});

$(window).on('mouseup', function(e){
  // stop movement even if mouseup happens somewhere outside the carousel
  myGlobals.state.dragging = false; 
});

$(window).on('mousemove', function(e){
  // allow user to drag beyond confines of the carousel
  if(myGlobals.state.dragging == true){
    recalculateCarouselPosition(e);
  }
});

function recalculateCarouselPosition(e){
  // These fun bits are left as an exercise for the reader
  // the event variable `e` gives you the pixel coordinates where the mouse is
  // You will have to do some math to determine what you need to do after this drag.
  // You may want to store the coordinates of the initial click in 
  // `myGlobals.dragStart.x, .y` or similar so you can easily compare them
  // You will probably set a negative CSS margin-left property on some element
  // of your carousel.
  // The carousel will probably have overflow:hidden.
  // You will also have to manipulate the DOM, by adding a duplicate image to the
  // opposite end and deleting the duplicates once they have scrolled out of view

};