Как сделать передвижения div'ов стрелками клавиатуры?

Question

[Kery]

Есть вот такой код, который двигает объект по клику и добавляет класс selected (border dashed):

var $div = $('div');

$div.click(function(){

    $div.addClass('.selected');

    $(document).keydown(function(e) {
    switch (e.which) {
    case 37:
        $div.css('left', $div.offset().left - 10);
        break;
    case 38:
        $div.css('top', $div.offset().top - 10);
        break;
    case 39:
        $div.css('left', $div.offset().left + 10);
        break;
    case 40:
        $div.css('top', $div.offset().top + 10);
        break;
        }
    })

});

Проблема в том, что таких объектов несколько, и мне нужно делать deselect при клике в любую область страницы, или на другой объект для движения.

Answer 1

[alexesDev]

Нельзя так делать, вы при каждом клике создаёте новый обработчик. Это очень фигово.
Вынесите обработку нажатий, обработчик нужно один раз вешать.

var $div;

$(document).keydown(function(e){
    if(!$div) return;
    // ... обработка
});

$('body').click(function(e){
    $div = null;
    return false;
});

$('div').click(function(e){
    $div = $(this);
    return false;
});

jsfiddle.net/Ye8bb/4

Comments

[Евгений Калибров]

При клике по body, тоже нужно $div.removeClass('selected');
jsfiddle.net/Ye8bb/3

[Kery]

но ведь не работает же, жму вне квадратов, выделение остается, алерт не всплывает

[alexesDev]

Как-то странно на jsfiddle не хочет body обрабатывать, на document работает jsfiddle.net/Ye8bb/4

[Николай Васильчук]

Зачем слушать keydown, если нет активного элемента? Overhead. Ниже рабочее решение.

[alexesDev]

Мдя. Экономия на спичках. Никакого особенного everhead там.

[Николай Васильчук]

Пишите хороший код. Здесь вы забили на listener, там вы плюнете еще на что-то, а потом "а что это у нас проект тормозит" и "а почему это говнокод, всё работает ведь".

[alexesDev]

Мой вариант... Хранить ссылку на функцию и вызывать её (выполняется она мгновенно, когда активного элемента нет).

Ваш вариант... Удалять ссылку и добавлять её снова при надобности в массив с колбеками (операция вставки и удаления может быть дорогая, в зависимости от реализации).

Я не знаю, каким образом движок JS реализует массивы... поэтому не скажу точно. Но в любом случае они равны или ваш вариант хуже, потому-то jmp if ret быстрее, чем операции с массивами.

Да и вообще, это не место для оптимизаций. Грубой ошибки тут нет, а у вас придирки, типа диванной аналитики.

[Николай Васильчук]

@alexesDev Как скажете.

[Евгений Калибров]

@alexesDev body у тебя не отрабатывало потому что нужно было ему высоту в css 100% поставить, можете у меня посмотреть jsfiddle.net/Ye8bb/3

Answer 2

[Николай Васильчук]

Вот рабочее решение jsfiddle.net/Ye8bb/5

Answer 3

[Евгений Калибров]

Доработал деактивацию выделения, при клике по body, в примере от товарища @alexesDev jsfiddle.net/Ye8bb/3