javascript - 拖动元素

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

};