问题描述
我有 3 个项目,分别是项目 1、项目 2 和项目 3
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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)