鼠标拖动滚动内容

Question

我目前正在开发一个画廊，您可以在其中拖动以滚动浏览画廊中的图像，类似于this。

拖动检测工作正常，但我没有让内容的滑动正常工作。它检测到拖动并设法设置正确的位置，但是当我再次拖动时它会跳回到开头。

这是在拖动时运行的函数的样子：

dragContent: function(e) {

    var delta = e.pageX - Project.dragStartX;
    Project.isIE ? $('#gallery-content').css("margin-left", delta) : $('#gallery-content').css("translateX", delta);

},  

看看jsfiddle 是不是我重现了这个问题。

我认为我需要保存内容停止的位置，并以某种方式在检测到下一次拖动时从该位置开始。我也想要像这个例子一样的平滑缓动，如果它仍然在“mouseup”上滚动一点。

我希望有人愿意分享他们对如何在不使用插件的情况下解决此问题的想法。

Answer 1

您还需要存储滑块的当前状态。现在，您正在正确计算增量，即您的鼠标（或指针）已移动的距离。然后您将增量设置为边距，这意味着您始终从 0 开始。

我修改了你的代码，你可以找到solution in this fiddle。

除了你的dragStartX，我还介绍了一个containerX和tempContainerX

// beginning of the code
dragStartX = 0;
containerX = 0;
tempContainerX = 0;

在鼠标按下时，我更新 containerX（这是“盒子开始的地方”）

containerX = containerX + tempContainerX;

在拖动时，我将使用这个初始偏移来校正位置：

$('#gallery-content').css("margin-left",containerX + delta);

Answer 2

要获得无卡顿拖动，您需要在 mousedown 时跟踪元素的现有 margin-left 并添加到它而不是覆盖它。以下是一个使用新变量“marginLeftStart”来跟踪原始margin-left 在鼠标按下时的实际示例。

工作现场示例：

//Set Variables
var enableDrag = false,
    dragStartX = 0;
var marginLeftStart = 0;

// Enable dragging and set position on mousedown
$('#gallery-container').mousedown(function(e) {

    enableDrag = true;
    dragStartX = e.pageX;

    marginLeftStart = parseInt($('#gallery-content').css("margin-left"));

    e.preventDefault();
});

// set position of content if dargging is enabled.
$(document).unbind("mousemove");
$(document).mousemove(function(e) {

    if (enableDrag) {

        // Get the position of the drag.	
        var delta = e.pageX - dragStartX;

        // Set the css. 
        $('#gallery-content').css("margin-left", marginLeftStart + delta);
    }

    e.preventDefault();

});

// Disable dragging on "mouseup".
$(document).unbind("mouseup");
$(document).mouseup(function(e) {

    if (enableDrag) {
        enableDrag = false;
    }

    e.preventDefault();

});

#gallery-container {
	height: 500px;
    position: relative;
    width: 100%;
    overflow: hidden;
}
#gallery-content {
    float: left;
    width: 1650px;
}
.gallery-item {
    float: left;
}

.gallery-item img {
    border: 0;
	max-width: none;
	height: 300px;
	width: auto;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery-container">
    <div id="gallery-content">
        <div class="gallery-item">
            <img src="http://dummyimage.com/300x500/000000/fff&text=Dummyimage 1" />
        </div>
         <div class="gallery-item">
            <img src="http://dummyimage.com/450x500/000000/fff&text=Dummyimage 2" />
        </div>       
        <div class="gallery-item">
            <img src="http://dummyimage.com/600x500/000000/fff&text=Dummyimage 3" />
        </div>    
        <div class="gallery-item">
            <img src="http://dummyimage.com/300x500/000000/fff&text=Dummyimage 4" />
        </div>         
    </div>
</div>

JSFiddle 版本：http://jsfiddle.net/uh15a64y/3/