swiper.js实现左右切换 一个页面中有需要实现拖拽的部分 貌似冲突怎么解决

Question

现在整个页面是左右切换的通过swiper实现
现在一个页面中的某一部分需要拖拽 如图 请问怎么实现 貌似现在是有冲突的 还是我写错了也不是很清楚

<div class="swiper-slide">

            <img id="drag1" src="img/s1_ejiao.png" draggable="true" ondragstart="drag(event)">

            <img src="img/s1_rightIcon.png">

            <div class="swiper-button-prev swiper-button-white"></div>

            <div class="swiper-button-next swiper-button-white"></div>

            <div id="dropEjiao" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

        </div>

        

        $('.s1_ejiao').on('touchstart', function () {

        mySwiperScence.lockSwipes();

    })

    $('.s1_ejiao').on('touchend', function () {

        mySwiperScence.unlockSwipes();

    })

    // 拖放

    function allowDrop(ev) {

        ev.preventDefault();

    }

    function drag(ev) {

        ev.dataTransfer.setData("Text", ev.target.id);

    }

    function drop(ev) {

        ev.preventDefault();

        var data = ev.dataTransfer.getData("Text");

        ev.target.appendChild(document.getElementById(data));

    }