鼠标拖动滚动内容

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

要获得无卡顿的拖动，您需要在 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/

Answer 2

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

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

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

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

鼠标按下时，我更新了 containerX（即 "where the box started"）

containerX = containerX + tempContainerX;

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

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

鼠标拖动滚动内容

Mouse drag to scroll content

jquery

transform

drag