触发点击并保持事件

Question

题:

使用jQuery,我如何模仿点击保持事件？

---

我目前正在靠墙撞墙,似乎无法弄清楚如何解决这个问题!

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

在我目前的例子中,我使用的是jQuery UI .draggable().

理想情况下,我想做以下事情:

• 执行点击/ mousedown div.
• 模仿点击并保持事件并能够自由移动元素.
• 在下一次单击/ mousedown上,结束单击并保持事件.

当我尝试以下功能:

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

然后它会导致无限循环,最终导致浏览器崩溃.但是,我不确定如何启动常量.mousedown()事件.

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

任何帮助将不胜感激!

Answer 1

我认为没有一些选项来模拟点击并按住.此外,它可能会创建太多的浏览器依赖.

所以你可以尝试下面的东西.

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/

Answer 2

Wolf和Dom的解决方案运行良好,是我解决方案的基础,但是你提到你使用的是jquery ui draggable,所以这里有一个可能的解决方案,使用jquery ui的draggable对象和a droppable.我试图让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),但在将来的版本中可能会更改,因为它确实使用私有调用.