Отключить перемещение мыши по клику

Question

Я экспериментирую с перетаскиванием, вот мой код:

$('.box-title').live('mousedown click', function(e)
{
    var self = $(this);
    var Box = self.parent('#box');

    if(e.type == 'mousedown')
    {
        $(window).mousemove(function(e)
        {
            Box.css({ cursor: 'move', top: e.pageY - 15, left: e.pageX - 125 });
        });
    }
    else if(e.type == 'click')
    {
        Box.css({ cursor: 'default', top: e.pageY - 15, left: e.pageX - 125 });
    }
});

В mousedown, он должен инициировать эффект перетаскивания, перемещая мышь, после чего, если я хочу закрепить / опустить ящик, где я хочу его, я нажимаю на него, это должно отключить перемещение, но если я нажимаю на него , он не перестает двигаться - просто продолжает следовать за моей мышью. Как вы можете остановить перетаскивание?

Answer 1

Вам необходимо отсоединить обработчик mousemove, который все еще подключен в данный момент, например:

function setPos(e) {
  //can be $('#box') in this case...
  $(this).parent('#box').css({ cursor: 'move', top: e.pageY - 15, left: e.pageX - 125 });
}    
$('.box-title').live('mousedown click', function(e) {
    if(e.type == 'mousedown') {
        $(window).mousemove(setPos);
    }
    else if(e.type == 'click') {
        $(window).unbind('mousemove', setPos);
    }
});

Или, в jQuery 1.4.3+, обработчик .live() может быть немного чище:

$('.box-title').live({
  mousedown: function() {
    $(window).mousemove(setPos);
  },
  click: function() {
    $(window).unbind('mousemove', setPos);
  }
});

---

Кроме того, он появляется у вас есть несколько id="box" элементов на странице ... убедитесь, что в этих случаях используются классы, в этом коде $(this).parent('#box') будет $(this).closest('.box').

Answer 2

Попробуйте добавить

$(window).unbind('mousemove')

в событие клика.

Answer 3

else if(e.type == 'click')
{
    $(window).unbind('mousemove')
}

Но на самом деле вы должны назвать событие, чтобы вы могли отменить привязку только соответствующего слушателя события.

Bind: $(window).bind('mousemove.dragging', function(){});

Unbind: $(window).unbind('mousemove.dragging', function(){});