我一直在研究这段代码,一切似乎都工作得很好。当我将其中一个黄色框拖到红色容器上时,变量 price
会随着 data-price
值递增,然后在黄色框超出红色时减去容器。
当我再次将它们拖回到红色容器上并导致 NaN 时,问题就出现了。 $(".draggable[data-item='"+ value + "']").data('price');
似乎未定义。
任何正确方向的帮助都会受到赞赏。
$(function() {
var price = 0, math = '', items = [];
function calcPrice(math) {
console.log(items);
$.each( items, function( key, value ) {
if(math == 'add')
price += $(".draggable[data-item='" + value + "']").data('price');
if(math == 'remove')
price -= $(".draggable[data-item='" + value + "']").data('price');
});
$("#droppable").text(price);
}
$(".draggable").draggable({ containment: "#container", scroll: false });
$("#droppable").droppable({
drop: function(e, u) {
items.push(u.draggable.data('item'));
calcPrice('add');
},
out: function(e, u) {
calcPrice('remove');
items.splice($.inArray(u.draggable.data('item', items),1));
}
});
});
<div id="container">
<div id="droppable"></div>
<div class="draggable" data-item="1" data-price="541">541</div>
<div class="draggable" data-item="2" data-price="542">542</div>
</div>
最佳答案
代码中有问题的行是
items.splice($.inArray(u.draggable.data('item', items),1));
我已将其更改为 items.splice($.inArray(u.draggable.data('item'), items));
NaN 问题不再存在..你必须检查价格的计算..
see this link
关于javascript - jQuery 可拖动和可放置与 data() 一起返回 NaN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14749314/