Question

我正在做一种旋转木马，我也需要它在触摸设备上工作...... 一切正常但现在我正在尝试实现鼠标拖动事件我几乎没有问题......

HTML看起来类似于：

<div class="mover">
    <ul class="wrapper">
        <li>
            <div class="t">
                <div class="tc">
                    <p>1</p>
                </div>
            </div>
        </li>
        <li>
            <div class="t">
                <div class="tc">
                    <p>2</p>
                </div>
            </div>
        </li>
        <li>
            <div class="t">
                <div class="tc">
                    <p>3</p>
                </div>
            </div>
        </li>
    </ul>
</div>

我省略了各种控件，因为这个范围不需要。

我正在尝试实现的js功能如下所示：

var startDragPosition = false;
var $mover = $('.mover');
var $wrapper = $('.wrapper');

function startDrag( event ) {
    event.preventDefault();

    if ( $wrapper.triggerHandler( 'isScrolling' ) ) {
        startDragPosition = false;
        return;
    }
    startDragPosition = event.pageX;
    $mover.bind(
        'mousemove',
        function( e ) {
            $mover.css({
                'marginLeft': -(300 + startDragPosition - e.pageX)
            });
        }
    );
}
function stopDrag( event ) {
    event.preventDefault();
    $mover.unbind('mousemove');

    if ( startDragPosition ) {
        var currentDragPosition = event.pageX;
        var direction = false;
        if ( startDragPosition < currentDragPosition ) {
            direction = 'prev';
        } else if ( startDragPosition > currentDragPosition ) {
            direction = 'next';
        }
        if ( direction ) {
            $wrapper.trigger( direction );
            $mover.animate({
                'left': ((direction == 'next') ? '-=' : '+=') + 300
            }, 'slow');
        }
    }
    startDragPosition = false;
}

$mover.bind('mousedown', startDrag)
$mover.bind('mouseup', stopDrag)
$mover.bind('mouseleave', stopDrag);

其他控件的移动基于left元素的.mover位置。我想做的是：

当我开始拖动时，我希望看到要移动的项目。
当我停止拖动时，我希望看到该项目移动到下一个或上一阶段（如果存在）。

我正在努力尝试，但我无法理解如何让它正常运作......我认为接近解决方案......

JsFiddle：http://jsfiddle.net/Ttt93/

Javascript轮播拖动事件

0 个答案: