Question

我正在努力实现以下目标。当用户将图标拖动到html页面中的特定位置并保持约3秒时，它必须自动创建新页面（如果没有页面），否则转到下一页（或上一页）。

这可以通过jQuery实现吗？如果是的话，我该如何实现呢？

我发现并试图遵循以下解决方案：

使用Remy Sharp mousedrop插件。在这个插件中，我可以使用timerinterval来计算我是否在一个特定区域内一段时间。

$(this).mousedown(function(interval))
{

}

但不知怎的，我没有使用jQuery UI的拖放功能。我已经用jQuery UI开发了一些代码，但是如果它有用吗？我真的不知道。

    $("#pickUpDiv").draggable({
    start: function () {

    },
    drag: function() {
        var timeOutPointer = -1;
        var focusElm       = $("#focusCenter");
        var leftTopPos     = focusElm.position();
        var height         = focusElm.height();
        var width          = focusElm.width();
        var rightBottomPos = {
            right:  leftTopPos.left + width,
            bottom: leftTopPos.top + height
        };

        var pos = $(this).position();

        if ((pos.left > leftTopPos.left && pos.top > leftTopPos.top) && (pos.left < rightBottomPos.right && pos.top < rightBottomPos.bottom)) {
            $(document).mousehold(function(timerInterval) {
                if (timerInterval == 30) {
                    createNewPage();
                } else {

                }
            });
        }
    },
    stop: function() {

    }
});

这是我的测试设置：

<div id="focusCenter" style="height: 200px; width: 200px; border: 1px solid black;">

</div>

<div id="pickUpDiv" style="height: 100px; width: 100px; background-color: red;">
    &nbsp;
</div>

我希望有人可以帮助我，或者至少指出我正确的方向...... :)先谢谢你了。

Answer 1

您可能需要参加touchstart touchmove和touchend次活动

这是一篇关于移动safari对鼠标/触摸事件的处理的文章：http://blogs.adobe.com/adobeandjquery/2011/03/07/the-current-state-of-touch-events/

修改

决定将我的评论编辑到我的答案中：

我做了类似的事情。我做的是当鼠标进入一个对象时，我向对象添加了一个类并设置了一个超时，以查看该对象在n秒后是否还有一个类。在mouseout上删除该类并删除计时器。如果解释不够，我会看看是否可以找到示例代码。我的目的是在树状结构中拖放“文件”，并在悬停和等待后展开文件夹。

iPhone jQuery动作拖放

1 个答案: