如何使 javascript 可拖动工作在移动设备上

如何解决如何使 javascript 可拖动工作在移动设备上

我有 3 个项目，分别是项目 1、项目 2 和项目 3

item1 带有， item1 带有， item1 带有

这些项目是可拖动的，当这些项目拖放到红色区域时，它会总结总和

它在桌面浏览器上成功运行，但该项目在移动浏览器上不可拖动。

我尝试使用 Draggin.js。它可以在移动浏览器上拖动，但 javascript 功能（计算）不起作用。

还有其他方法可以让它在移动浏览器上可拖动吗？

var price = 20,math = '',items = [],state = 'outside';
$(function() {
    function calcPrice(math) {
        var value = 0;
        price = 20;

    console.log("Item array: " + items);
        $.each( items,function( key,value ) {
        price+= $(".draggable[data-item='" + value + "']").data('price');
  });
        
    $("#test2").html(price)
}

$(".draggable").draggable({ 
    containment: "#container",scroll: false 
});
     
 $("#droppable").droppable({
        drop: function(e,u) {  
        if(u.draggable.data('state') == 'outside') {
            items.push(u.draggable.data('item'));
            u.draggable.data('state','inside');
            calcPrice('add');
        }
  },out: function(e,u) {
     if(u.draggable.data('state') == 'inside') {
       u.draggable.data('state','outside');
       var myIndex = $.inArray(u.draggable.data('item'),items);
       items.splice(myIndex,1);
       price = $("#droppable").text();
       calcPrice('remove');
     }
   }
 });
 });

#container { 
    width: 500px; 
    height: 350px; 
    background: #ccc; 
}

#droppable { 
    height: 100px; 
    width: 100%;;
    background: #ff0000; 
}

.draggable { 
    width: 100px; 
    height: 50px; 
    border: 1px solid black;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="https://aegasiagroup.com/wp-content/themes/Avada/js/DragDropTouch.js"></script>
<Meta charset=utf-8 />
</head>
<body>
    <div class="row">
<div id="container" class="col-sm-4">
    <div id="droppable">Drag and drop here</div>
    <div>
        <p>SUGAR: <span id="test2">20</span></p>
    </div>
    <div class="draggable" data-item="1" data-price="10" data-state="outside">Item 1 = [Price 10]</div>
    <div class="draggable" data-item="2" data-price="20" data-state="outside">Item 2 = [Price 20]</div>
    <div class="draggable" data-item="3" data-price="30" data-state="outside">Item 3 = [Price 30]</div>
        </div>
    </div>
</body>