Touch Events Mouse Event Обновление

Question

Я очень новичок во всем этом, и я учусь в колледже на курсе информатики, и у меня есть цель закончить к концу недели (завтра), и я немного застрял с переводом Mouse Control на Touch Control.

У меня есть скользящий элемент с несколькими элементами div в этом отображаемом тексте. Идея состоит в том, чтобы перемещать элементы Div из стороны в сторону с границами границ.

Я сам все это закодировал с помощью интернета, но со своей следующей частью я нахожусь в тупике.

TouchEvents:

У меня есть div с управлением мышью, но мне также требуется Touch Control. До сих пор мне удавалось установить распознавание сенсорных событий, но теперь я должен переместить div.

К сожалению, события мыши не двигают div вместе с прикосновением. Мне нужен новый метод для перемещения div с касанием.

Может ли кто-нибудь увидеть мой код и попытаться предложить мне способ переместить div касанием?

Я был бы очень признателен.

У меня есть идея, как это сделать, но на самом деле на данный момент мне больно писать, потому что я не знаю правильную процедуру или синтаксис JS.

Спасибо за любой совет. Вот мой код

    <div id='infotextinner' class='infotextinner' >             

    <div class='infobuttons' >Home & Garden</div>
    <div class='infobuttons' >Sports</div>
    <div class='infobuttons' >Electronics</div>
    <div class='infobuttons' >Jewelry</div>
    <div class='infobuttons' >Cosmetics</div>
    <div class='infobuttons' >Fashion</div>
    <div class='infobuttons' >Collectables</div>    
    <div class='infobuttons' >Pets & Animals</div>
    <div class='infobuttons' >Vehicles</div>
    <div class='infobuttons' >Houses/Flats</div>
    <div class='infobuttons' >Jobs/work</div>
    <div class='infobuttons' >Fashion</div>
    <div class='infobuttons' >Collectables</div>    
    <div class='infobuttons' >Pets & Animals</div>
    <div class='infobuttons' >Vehicles</div>
    <div class='infobuttons' >Houses/Flats</div>
    <div class='infobuttons' >Jobs/work</div>

    </div>

<script>

    dragElement(document.getElementById(("infotextinner")));

    var isOnDiv = false;
    $(infotextinner).mouseenter(function(){isOnDiv=true;});
    $(infotextinner).mouseleave(function(){isOnDiv=false;});

    if ( isOnDiv===true ) {dragElement();}

    if ( isOnDiv===false){document.onmouseup = null;}

    function dragElement(elmnt) {

    var pos1 = 0, pos3 = 0;

    elmnt.onmousedown = dragMouseDown;

    document.querySelector('#infotextinner').addEventListener('touchstart', dragMouseDown)

      function dragMouseDown(e) {
        e = e || window.event;

        pos3 = e.clientX;

        document.onmouseup = closeDragElement;

    document.querySelector('#infotextinner').addEventListener('touchend', closeDragElement)

        document.onmousemove = elementDrag;

    document.querySelector('#infotextinner').addEventListener('touchmove', elementDrag)
    }

      function elementDrag(e) {

        e = e || window.event;

        pos1 = pos3 - e.clientX;

        pos3 = e.clientX;

    document.getElementById('infotextinner').classList.remove("addtrans");

    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";



    var bodyRect1 = document.body.getBoundingClientRect(),

    elemRect1 = document.getElementById('maincontent').getBoundingClientRect(), 

    offset1 = elemRect1.left - bodyRect1.left; 



    var bodyRect2 = document.body.getBoundingClientRect(), 

    elemRect2 = elmnt.getBoundingClientRect(), 

    offset2   = elemRect2.left - offset1; 


    var elemWidth = document.getElementById('infotextinner').offsetWidth;

    var bodyWidth = document.body.offsetWidth;

    var offset3 = elmnt.offsetLeft - pos1;



    if (offset2 > 28) {elmnt.style.left = (elmnt.offsetLeft+pos1) + "px"; };


    if (offset2+elemWidth < bodyWidth-offset1-20) {elmnt.style.left =(elmnt.offsetLeft+pos1) + "px"; }; 

      }

      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
        document.ontouchstart = null;
        document.ontouchend = null;
        elementDrag();

      }


    };

</script>