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

问题描述

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

这是我的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.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）