WedX - журнал о программировании и компьютерных науках

Клиентские координаты Dragend несовместимы в Safari и Firefox

В настоящее время работаю над редактированием изображений с помощью перетаскивания. Имея что-то функциональное в Chrome, но в Safari событие dragend возвращает дурацкие координаты (e.clientX и e.clientY). Только что попробовал в Firefox, и теперь значения пустые.

Таким образом, это должно возвращать положение мыши на холсте, когда пользователь бросает изображение, что отлично работает в Chrome, но в Safari clientX слишком велико, а clientY отрицательно ...

sticker.addEventListener("dragend", (e) => {
    let coords = new Array(
        document.getElementById("canvas").getBoundingClientRect()
    ).map((rect) => {
        console.log(e.clientX(e.clientY));
        return [(e.clientX - rect.left)(e.clientY - rect.top)].join();
    });
});


Ответы:


1

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

Это как-то утечка информации, и браузерам это не нравится.

Простой обходной путь - вместо этого прослушать событие drop, которое должно сработать в вашем элементе холста. В этом случае считается, что пользователь дал вам все разрешения на перетаскиваемый контент, поэтому браузеры предоставят вам правильные координаты.

const ctx = canvas.getContext('2d');
ctx.fillText('drop here', 20, 20);
canvas.addEventListener('drop', e => draw(e, 'red'));
canvas.addEventListener('dragover',e=>e.preventDefault());
sticker.addEventListener('dragstart', e=>{e.dataTransfer.setData('text', null)});

function draw(e, color) {
   e.preventDefault();
   const rect = canvas.getBoundingClientRect();
   ctx.beginPath();
   ctx.arc((e.clientX - rect.left), (e.clientY - rect.top), 5, 0, Math.PI*2);
   ctx.fillStyle = color;
   ctx.fill();
}
canvas {
  border:1px solid;
}
<div id="sticker" draggable="true">drag me</div>
<canvas id="canvas"></canvas>

09.08.2018
  • Я нашел еще один трюк, потому что мне пришлось использовать dragend, а не событие drop, поэтому на dragend я получал позицию события MousePos, но я признаю, что ваш способ сделать чище. Спасибо ! 09.08.2018

  • 2

    Мое решение состояло в том, чтобы отслеживать позицию, заданную функцией обратного вызова перетаскивания (у которой нет проблемы с «dragEnd»), а затем, когда запускается «dragEnd», я просто использую последние значения из этих временных переменных.

    Пример:

    drag (ev) {
      this.last_x = ev.clientX;
      this.last_y = ev.clientY;
      ...
    },
    dragEnd (ev) {
      this.x = this.last_x;
      this.y = this.last_y;
      ...
    }
    

    Надеюсь, это поможет.

    28.08.2019
    Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]