Имитация событий перетаскивания с сенсорными событиями для мобильных устройств

Question

Некоторое время назад я боролся с перетаскиванием в веб-браузерах на мобильных устройствах.События javascript по умолчанию не работают на мобильных устройствах.Вы можете использовать только сенсорные события.

В моем случае мне нужно поменять местами два изображения, а также идентификаторы, выполнив перетаскивание.Вот пример:

div{
  display:inline-block;
  border:1px solid #0b79d0;
}

div, img{
        width:120px;
        height:120px;
    }

<div id="1" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="a" draggable="true" ondragstart="dragStart(event)" src="https://static.webshopapp.com/shops/073933/files/156288269/345x345x1/artibalta-white-tiger.jpg"/>
</div>

<div id="2" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="b" draggable="true" ondragstart="dragStart(event)" src="https://yt3.ggpht.com/a-/AN66SAyfsmao4f1EEOqkBP2PgpSUcabPJXLZ1sLEnA=s288-mo-c-c0xffffffff-rj-k-no"/>
</div>

<div id="3" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="c" draggable="true" ondragstart="dragStart(event)" src="https://kinderbilder.download/wp-content/uploads/2018/10/animals-for-dolphin-drawings-pencil-drawings-pinterest-verwandt-mit-delfine-zeichnen-100x100.jpg"/>
</div>

<script>
    function allowDrop(ev){
        ev.preventDefault();
    }

    function dragEnter(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border = "dotted";
        element.style.borderColor = "#0b79d0";
    }

    function dragLeave(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border = "1px solid #0b79d0";
    }

    function dragStart(ev){
        ev.dataTransfer.setData("src", ev.target.id);
        var number = ev.target.id.replace ( /[^\d.]/g, '' );
        ev.dataTransfer.setData("text/plain", number);
    }

    function drop(ev) {
        ev.preventDefault();
        var src = document.getElementById(ev.dataTransfer.getData("src"));

        var srcParent = src.parentNode;
        var tgt = ev.currentTarget.firstElementChild;
        ev.currentTarget.replaceChild(src, tgt);
        srcParent.appendChild(tgt);

        var number1 = srcParent.id.replace(/[^\d.]/g, '');
        var number2 = ev.currentTarget.id.replace(/[^\d.]/g, '');

        var element = document.getElementById(ev.target.id);
        element.style.border = "solid 1px #0b79d0";

        var number = ev.target.id.replace(/[^\d.]/g, '');
    }
</script>

Таким образом, событие dragStart хранит информацию, такую ​​как изображение.Однако такая операция невозможна с сенсорными событиями.

Теперь мне стало интересно, есть ли способ сделать то же самое на мобильном телефоне, просто имитируя события перетаскивания с помощью сенсорных событий?

Answer 1

Для образовательных целей хорошо то, что вы делаете.

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

Поэтому я рекомендую вам эту Drag & Drop библиотеку.Простой в использовании, веселый, легкий и очень ухоженный.

Answer 2

• Чтобы решить эту проблему некоторое время назад (если время было основным фактором), нужно было реализовать сенсорный удар - http://touchpunch.furf.com/

• Это плагин jquery-ui, который передает события касанияк событиям мыши (поэтому обычно достаточно импортировать lib - не нужно менять код)

Answer 3

Я настоятельно рекомендую вам использовать библиотеку для мобильных устройств.Мне пришлось вести себя примерно так же, и я использовал interactive.js , который очень удобен и готов для мобильных устройств.

Если вы просто хотите добавить сенсорные жесты в свое приложение, просто посмотрите на Hammer.js .Это основная библиотека для использования сенсорных событий.

И если вы используете jQuery, посмотрите на эту тему .

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