代码之家 › 专栏 › 技术社区 › lassemt

鼠标拖动以滚动内容

drag transform jquery

lassemt · 技术社区 · 9 年前

我目前正在开发一个画廊,您可以拖动它来滚动画廊中的图像,类似于 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”上仍然滚动一点。

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

2 回复 | 直到 9 年前

amenthes 9 年前

您还需要存储滑块的当前状态。现在,您正在正确计算增量,即鼠标(或指针)移动的距离。然后将增量设置为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);

Maximillian Laumeister 9 年前

要获得无jank的拖动,您需要跟踪元素的现有 margin-left 在 mousedown 并添加到其中而不是覆盖它。下面是一个使用新变量“marginLeftStart”跟踪原始 左侧边距 鼠标按下。

工作现场示例:

//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/