我有以下问题： 我将dragdata插件用于chartjs。现在，我要检查该下降是否是允许的值；当不跳到最接近的允许值时。有人知道我该怎么做吗？
这些是我图表的选择：
var optionsDesktop = {
responsive: false,
dragData: true,
dragDataRound: 0,
onDragStart: function(e, datasetIndex, index, value) {
console.log(e)
},
onDrag: function(e, datasetIndex, index, value) {
console.log(datasetIndex, index, value)
if (datasetIndex === 0) {
switch (index) {
case 0:
console.log('hier ist 0');
if ((value === 33) || (value === 67) || (value === 100)) {
e.preventDefault();
} else {
e.preventDefault(none);
console.log("now allowed");
}
break;
case 1:
console.log('hier ist 1');
break;
case 2:
console.log('hier ist 2');
break;
case 3:
console.log('hier ist 3');
break;
case 4:
console.log('hier ist 4');
break;
case 5:
console.log('hier ist 5');
break;
case 6:
console.log('hier ist 6');
break;
}
}
},
onDragEnd: function(e, datasetIndex, index, value) {},
}
答案 0 :(得分：0)
我使用此解决方案，在此项目和条件下效果很好
onDragEnd: function(e, datasetIndex, index, value) {
if (datasetIndex === 0) {
switch (index) {
//case for 1 chart axis
case 0:
if (value >= 0 && value <= 33) {
if ($('#value-level3').is(':checked')) {
} else {
$('#value-level3').prop('checked', 'checked');
var changeAnswer = $('#value-level3')
.next('label')
.text();
answerData.splice(0, 1, changeAnswer);
}
chartData.splice(0, 1, '33');
reloadChart();
} else if (value >= 34 && value <= 67) {
if ($('#value-level2').is(':checked')) {
} else {
$('#value-level2').prop('checked', 'checked');
var changeAnswer = $('#value-level2')
.next('label')
.text();
answerData.splice(0, 1, changeAnswer);
}
chartData.splice(0, 1, '67');
reloadChart();
} else {
if ($('#value-level1').is(':checked')) {
} else {
$('#value-level1').prop('checked', 'checked');
var changeAnswer = $('#value-level1')
.next('label')
.text();
answerData.splice(0, 1, changeAnswer);
}
chartData.splice(0, 1, '100');
reloadChart();
}
break;
//case for 2 chart axis
case 1:
if (value >= 0 && value <= 20) {
if ($('#value-level5-2').is(':checked')) {
} else {
$('#value-level5-2').prop('checked', 'checked');
var changeAnswer = $('#value-level5-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '20');
reloadChart();
} else if (value >= 21 && value <= 40) {
if ($('#value-level4-2').is(':checked')) {
} else {
$('#value-level4-2').prop('checked', 'checked');
var changeAnswer = $('#value-level4-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '40');
reloadChart();
} else if (value >= 41 && value <= 60) {
if ($('#value-level3-2').is(':checked')) {
} else {
$('#value-level3-2').prop('checked', 'checked');
var changeAnswer = $('#value-level3-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '60');
reloadChart();
} else if (value >= 61 && value <= 80) {
if ($('#value-level2-2').is(':checked')) {
} else {
$('#value-level2-2').prop('checked', 'checked');
var changeAnswer = $('#value-level2-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '80');
reloadChart();
} else {
if ($('#value-level1-2').is(':checked')) {
} else {
$('#value-level1-2').prop('checked', 'checked');
var changeAnswer = $('#value-level1-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '100');
reloadChart();
}
break;
//case for 3 chart axis
case 2:
if (value >= 0 && value <= 25) {
if ($('#value-level4-3').is(':checked')) {
} else {
$('#value-level4-3').prop('checked', 'checked');
var changeAnswer = $('#value-level4-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '25');
reloadChart();
} else if (value >= 25 && value <= 50) {
if ($('#value-level3-3').is(':checked')) {
} else {
$('#value-level3-3').prop('checked', 'checked');
var changeAnswer = $('#value-level3-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 75) {
if ($('#value-level2-3').is(':checked')) {
} else {
$('#value-level2-3').prop('checked', 'checked');
var changeAnswer = $('#value-level2-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '75');
reloadChart();
} else {
if ($('#value-level1-3').is(':checked')) {
} else {
$('#value-level1-3').prop('checked', 'checked');
var changeAnswer = $('#value-level1-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '100');
reloadChart();
}
break;
//case for 4 chart axis
case 3:
if (value >= 0 && value <= 33) {
if ($('#value-level3-4').is(':checked')) {
} else {
$('#value-level3-4').prop('checked', 'checked');
var changeAnswer = $('#value-level3-4')
.next('label')
.text();
answerData.splice(3, 1, changeAnswer);
}
chartData.splice(3, 1, '33');
reloadChart();
} else if (value >= 34 && value <= 67) {
if ($('#value-level2-4').is(':checked')) {
} else {
$('#value-level2-4').prop('checked', 'checked');
var changeAnswer = $('#value-level2-4')
.next('label')
.text();
answerData.splice(3, 1, changeAnswer);
}
chartData.splice(3, 1, '67');
reloadChart();
} else {
if ($('#value-level1-4').is(':checked')) {
} else {
$('#value-level1-4').prop('checked', 'checked');
var changeAnswer = $('#value-level1-4')
.next('label')
.text();
answerData.splice(3, 1, changeAnswer);
}
chartData.splice(3, 1, '100');
reloadChart();
}
break;
//case for 5 chart axis
case 4:
if (value >= 0 && value <= 25) {
if ($('#value-level4-5').is(':checked')) {
} else {
$('#value-level4-5').prop('checked', 'checked');
var changeAnswer = $('#value-level4-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '25');
reloadChart();
} else if (value >= 25 && value <= 50) {
if ($('#value-level3-5').is(':checked')) {
} else {
$('#value-level3-5').prop('checked', 'checked');
var changeAnswer = $('#value-level3-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 75) {
if ($('#value-level2-5').is(':checked')) {
} else {
$('#value-level2-5').prop('checked', 'checked');
var changeAnswer = $('#value-level2-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '75');
reloadChart();
} else {
if ($('#value-level1-5').is(':checked')) {
} else {
$('#value-level1-5').prop('checked', 'checked');
var changeAnswer = $('#value-level1-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '100');
reloadChart();
}
break;
//case for 6 chart axis
case 5:
if (value >= 0 && value <= 25) {
if ($('#value-level4-6').is(':checked')) {
} else {
$('#value-level4-6').prop('checked', 'checked');
var changeAnswer = $('#value-level4-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '25');
reloadChart();
} else if (value >= 25 && value <= 50) {
if ($('#value-level3-6').is(':checked')) {
} else {
$('#value-level3-6').prop('checked', 'checked');
var changeAnswer = $('#value-level3-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 75) {
if ($('#value-level2-6').is(':checked')) {
} else {
$('#value-level2-6').prop('checked', 'checked');
var changeAnswer = $('#value-level2-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '75');
reloadChart();
} else {
if ($('#value-level1-6').is(':checked')) {
} else {
$('#value-level1-6').prop('checked', 'checked');
var changeAnswer = $('#value-level1-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '100');
reloadChart();
}
break;
//case for 7 chart axis
case 6:
if (value >= 0 && value <= 12) {
if ($('#value-level8-7').is(':checked')) {
} else {
$('#value-level8-7').prop('checked', 'checked');
var changeAnswer = $('#value-level8-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '12');
reloadChart();
} else if (value >= 13 && value <= 25) {
if ($('#value-level7-7').is(':checked')) {
} else {
$('#value-level7-7').prop('checked', 'checked');
var changeAnswer = $('#value-level7-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '25');
reloadChart();
} else if (value >= 26 && value <= 37) {
if ($('#value-level6-7').is(':checked')) {
} else {
$('#value-level6-7').prop('checked', 'checked');
var changeAnswer = $('#value-level6-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '37');
reloadChart();
} else if (value >= 38 && value <= 50) {
if ($('#value-level5-7').is(':checked')) {
} else {
$('#value-level5-7').prop('checked', 'checked');
var changeAnswer = $('#value-level5-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 62) {
if ($('#value-level4-7').is(':checked')) {
} else {
$('#value-level4-7').prop('checked', 'checked');
var changeAnswer = $('#value-level4-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '62');
reloadChart();
} else if (value >= 63 && value <= 75) {
if ($('#value-level3-7').is(':checked')) {
} else {
$('#value-level3-7').prop('checked', 'checked');
var changeAnswer = $('#value-level3-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '75');
reloadChart();
} else if (value >= 76 && value <= 88) {
if ($('#value-level2-7').is(':checked')) {
} else {
$('#value-level2-7').prop('checked', 'checked');
var changeAnswer = $('#value-level2-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '88');
reloadChart();
} else {
if ($('#value-level1-7').is(':checked')) {
} else {
$('#value-level1-7').prop('checked', 'checked');
var changeAnswer = $('#value-level1-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '100');
reloadChart();
}
break;
}
}
},