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

您还需要存储滑块的当前状态。现在，您正在计算delta，这是您的鼠标（或指针）行进的距离。然后，您将delta设置为margin，这意味着您始终从0开始。

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

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

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

在mousedown上，我更新了containerX（这是“盒子开始的地方”）

containerX = containerX + tempContainerX;

在拖动时，我将使用此初始偏移量来纠正位置：

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

Answer 2

要获得无抖动的拖动，您需要在margin-left时跟踪元素的现有mousedown并添加到它而不是覆盖它。以下是一个实例，它使用一个新变量“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/

拖动鼠标滚动内容

2 个答案: