6

问题：

使用 jQuery，如何模拟单击并按住事件？

我目前正在用头撞墙，似乎不知道该怎么做！

我也试过在谷歌和论坛上搜索，但无济于事。

在我当前的示例中，我使用的是 jQuery UI 的.draggable().

理想情况下，我想做以下事情：

  • 在div.
  • 模仿单击并按住事件并能够自由移动元素。
  • 在下一次单击/鼠标按下时，结束单击并按住事件。

当我尝试以下功能时：

$("#drag").draggable().mousedown(function(e){
    e.preventDefault();
    return $(this).mousedown();
});

然后它会导致无限循环，最终导致浏览器崩溃。但是，我不确定如何启动一个持续.mousedown()事件。

这是我目前拥有的演示：http: //jsfiddle.net/vPruR/16/。

任何帮助将不胜感激！

4

2 回答 2

8

我认为没有一些选项可以模拟单击并按住。此外，它可能会创建过多的浏览器依赖性。

因此，您可以尝试以下方法。

var click = false,
top = null,
left = null;

$(document).bind('mousemove', function (e) {
   if (click == true) {
      $('#drag').css({
         left: e.pageX - left,
         top: e.pageY - top
       });
    }
});

$('#drag').draggable().click(function(e) {
    top = e.pageY - $('#drag').position().top; 
    left = e.pageX - $('#drag').position().left;
    click = !click;
    return false;
});

$('html').click(function() {
    click = false;
});

演示：http: //jsfiddle.net/dirtyd77/qbcQn/

于 2013-01-21T19:19:27.923 回答
5

Wolf 和 Dom 的解决方案效果很好，是我的解决方案的基础，但您提到您使用的是 jquery ui's draggable，所以这里有一个可能的解决方案，将 jquery ui 的draggable对象与droppable. 我试图让可拖放的事件在可拖动的事件拖过它们并放在它们上时触发，因此我利用了继承和覆盖的ui.mouse对象的内置/私有函数。draggable

$(document).ready(function(){
      var click = false

    $(document).bind('mousemove', function (e) {
        if (click == true) {
           $('#drag').data('uiDraggable')._mouseDrag(e);
        }
    });

    $('#drag').draggable().click(function(e) {
        if(!click){
            $(this).data('uiDraggable')._mouseCapture(e, true)
            $(this).data('uiDraggable')._mouseStart(e, true, true);
        }else{
            $(this).data('uiDraggable')._mouseUp(e);
            $(this).data('uiDraggable')._mouseStop(e);
        }
        click = !click;
        return false;
    });

    $('html').click(function() {
        click = false;
    });
});

这是一个小提琴。要查看可放置的内容，只需取消注释 js 中可放置的内容即可。

注意：此解决方案适用于当前的 jquery ui 版本（1.9.2），但可能会在未来版本中更改，因为它确实使用私人调用。

于 2013-05-02T04:13:36.110 回答