I have 3 item which is item 1, item 2, and item 3
item1 with <data-price="10">， item1 with <data-price="20">， item1 with <data-price="30">
These items are draggable and when these items drag and drop on the red area, it will sum up the total
It works successfully on a desktop browser but the item is not draggable on the mobile browser.
I tried using Draggin.js. It's draggable on mobile browser but the javascript function(the calculation) is not working.
Is there another way to make it draggable on a mobile browser?
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>