如何在移动设备上添加拖放功能？

如何解决如何在移动设备上添加拖放功能？

我已经有一个用于在桌面上拖放的代码，但是当我在移动设备上测试它时，我无法拖动图像。

这是我的HTML代码

<div id="cardPile" class="cardpile flex-container">

<img id="drag-Box15" class="drag-Box ui-draggable ui-draggable-handle" src="Res/choices/15.png">

<img id="drag-Box15" class="drag-Box ui-draggable ui-draggable-handle" src="Res/choices/15.png">

</div>

这只是一个用于总结的 2 div，但我的代码中有 20 个。

这是我的 Javascript..

    var strPId;
    var stpPId;
    $('.drag-Box').draggable({
    helper: 'clone',appendTo: 'body',cursor: 'move',revert: true,start: function(e,ui) {
        $(this).css('visibility','hidden');
        if($(this).parent('.empty').length > 0) {
            strPId = $(this).parent('.empty').attr('id');
        }
    },stop: function(e,'');
        if($(this).parent('.empty').length > 0) {
            stpPId = $(this).parent('.empty').attr('id');
        }
    
        if(strPId != stpPId) {
            $('#'+strPId).droppable( 'enable' );
        }
    },})
    
    $('.empty').droppable({
    hoverClass: 'hovered',appendTo: '.empty',drop: function(event,ui){
        var id = $(ui.draggable).attr('id');
        var img = $(ui.draggable).html();
        var Box = $(this).attr('id');
        $('#'+Box).append($(ui.draggable))
        $('#'+Box).droppable( 'disable' );
        $('.drag-Box').css('width','200px');
        $('.drag-Box').css('height','8rem');
        $('.empty .drag-Box').css('width','200px');
        $('.empty .drag-Box').css('height','8rem');
        ui.draggable.position( { of: $(this),my: 'left top',at: 'left top' } );
        ui.draggable.draggable( 'option','revert',false );
        },})

I'm just a beginner,can someone help me how can I add a touch event here in my code so that I can drag and drop in mobile devices?

Thanks in advance.