Question

我必须通过单击它来移动div，再次单击我必须在该位置停止div。现在的问题是：当我想再次移动div时，不会激活mousemove事件......我该如何修复它？

$('.move_div').live('click', function() {                    
    $('html').on('mousemove', function(e) {
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
       $('div').css({'top': y, 'left': x});
    });
    $("html").live('click', function() {
       $('html').off('mousemove');
    });
});

Answer 1

var ele = '.move_adv';
var moveBool = false;

$(function () {
    $('html').on('mousemove', function (e) {
        console.log($(this).width());
        if (moveBool == true) {
            var x = e.pageX - $(ele).width()/2;
            var y = e.pageY - $(ele).height()/2;
            $(ele).css({
                'top': y,
                    'left': x
            });
        }
    });
});

$(ele).live('click', function () {
    moveBool = !moveBool;
});

http://jsfiddle.net/6y24s/2/

主要逻辑是将div的'moveability'状态存储在布尔值中。

您还希望进一步优化代码。

Answer 2

Fiddle here，如果你想保留你的代码，那么只需要添加

event.stopPropagation();

Answer 3

单击div时，mousemove处理程序将添加到div中。然后在文档中添加一个事件处理程序，删除任何mousemove事件处理程序然后移动鼠标，然后单击div，单击并删除mousemove处理程序。再次单击div，添加了mousemove事件处理程序，但文档中的click事件处理程序将删除mousemove处理程序。
因此，只要在前两次单击后单击，就会同时创建并销毁mousemove处理程序。

也可以使用.on（）代替.live（）
.live（）在JQuery 1.7中已弃用

如何重启事件mousemove jquery？

3 个答案: