Drag&Drop и Click на одном блоке

436
03 сентября 2017, 04:49

Подскажите пожалуйста.

    $(document).ready(function() {
    let block = $('div.block');
    let dragObject = {};
                block.mousedown(function (e) {
                    console.log('mousedown');
                    console.log('e.pageX '+e.pageX + ' ' + 'e.pageY '+e.pageY);
                    if (e.which != 1) {
                        return;
                    }
                    let target=$(e.target);
                    if (target.is(block) || target.closest(block).length > 0) {
                        let pOffset = $(e.target).closest(block).offset();
                        console.log('pOffset ');
                        console.log(pOffset);
                        let x = Math.round(e.pageX - pOffset.left);
                        let y = Math.round(e.pageY - pOffset.top);
                        dragObject.x = x;
                        dragObject.y = y;
                        dragObject.e = target.closest(block);
                        localStorage.setItem('relOX', x);
                        localStorage.setItem('relOY', y);
                    }
                });
                block.mouseup(function (e) {
                    console.log('mouseup');
                    if(!dragObject.m) {
                        block.css('background', 'red');
                    } else {
                       let pos = JSON.parse(localStorage.getItem('pos'));
                                             block.css({'top': pos.y, 'left': pos.x});
                    }
                    dragObject = {};
                    $('body').removeClass('disable-select');
                });
                $(document).mousemove(function (e) {
                    if(!dragObject.e) {
                        delete dragObject.m;
                        return;
                    } else {
                        console.log('mousemove');
                        let relX = Number(localStorage.getItem('relOX'));
                        let relY = Number(localStorage.getItem('relOY'));
                        let x = e.pageX - relX;
                        let y = e.pageY - relY;
                        if (Math.abs(x) < 6 && Math.abs(y) < 6) {
                            delete dragObject.m;
                            return;
                        }
                        console.log('X - '+x+' '+'Y - '+y);
                        localStorage.setItem('pos', JSON.stringify({y: y, x: x}));
                        block.css({'top': y, 'left': x});
                        dragObject.m = block;
                    }
                });
});

Есть такое: https://jsfiddle.net/dp39hc4x/25/

Перемещение работает, но простое нажатие нет (при простом нажатии должен измениться цвет).

Подскажите что не так делаю?

Answer 1
$(document).ready(function() {
    let block = $('div.block');
    let dragObject = {};
                block.mousedown(function (e) {
                    console.log('mousedown');
                    //console.log('e.pageX '+e.pageX + ' ' + 'e.pageY '+e.pageY);
                    if (e.which != 1) {
                        return;
                    }
                    let target=$(e.target);
                    if (target.is(block) || target.closest(block).length > 0) {
                        dragObject.downX = e.pageX;
                        dragObject.downY = e.pageY;
                        let coords = getCoords(block);
                        dragObject.shiftX = dragObject.downX - coords.left;
                        dragObject.shiftY = dragObject.downY - coords.top;
                        dragObject.e = target.closest(block);
                    }
                });
                $(document).mousemove(function (e) {
                    if(!dragObject.e) {
                        delete dragObject.m;
                        return;
                    } else {
                        console.log('mousemove');
                        console.log(dragObject);
                        let dX = e.pageX - dragObject.downX;
                        let dY = e.pageY - dragObject.downY;
                        if (Math.abs(dX) < 6 && Math.abs(dY) < 6) {
                            return;
                        }
                        let x = e.pageX - dragObject.shiftX;
                        let y = e.pageY - dragObject.shiftY;
                        console.log('X - '+x+' '+'Y - '+y);
                        localStorage.setItem('pos', JSON.stringify({y: y, x: x}));
                        block.css({'top': y, 'left': x});
                        dragObject.m = block;
                    }
                });
                                block.mouseup(function (e) {
                    console.log('mouseup');
                    if(!dragObject.m) {
                            if(block.hasClass('red')) {
                            block.removeClass('red');
                        } else {
                            block.addClass('red');
                        }
                    } else {
                       /*let pos = JSON.parse(localStorage.getItem('pos'));
                                             block.css({'top': pos.y, 'left': pos.x});*/
                    }
                    dragObject = {};
                });
});
function getCoords(elem) { // кроме IE8-
  let box = elem.get(0).getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

Решение тут: https://jsfiddle.net/dp39hc4x/28/

READ ALSO
Ошибка при вызове метода $(&#39;#id&#39;).load()

Ошибка при вызове метода $('#id').load()

Доброго времени суток

422
react native обработка ссылок в webView

react native обработка ссылок в webView

На устройстве хранятся зашифрованные xhtml файлы (+ не зашифрованныеcss,

480
Как создать фоновый процесс в apache cordova

Как создать фоновый процесс в apache cordova

Как в Apache cordova (Которая встроена в Visual Studio) сделать фоновый процесс вызывающийся раз в 5 минут либо работающий вечно(тогда на js напишу чтоб...

521
Как после заполнения форм ее скрыть

Как после заполнения форм ее скрыть

Здравствуйте! Есть поле для ввода числаПод полем для ввода кнопка "Отправить"

544