jquery ui touch punch не работает в Word Press
Следующий код отлично работает на моем компьютере, но не в Word Press. Я не могу заставить работать сенсорную функцию. Я всегда получаю следующее сообщение об ошибке:
jquery.js? ver = 1.12.4-wp:3 [Intervention] Игнорированная попытка отменить событие touchstart с cancelable=false, например, потому что прокрутка выполняется и не может быть прервана.
function refreshPage() {
window.location.reload();
}
jQuery(document).ready(function() {
jQuery('[data-toggle="popover"]').popover();
let arr = [];
let lösungen = ["hates", "plays", "do not smoke", "work", "do not listen", "does not want", "love", "read", "watch", "do not drive"];
jQuery('#answer-container li').draggable({
stack: "#answer-container li",
helper: "clone",
revert: 'invalid',
cursor: "move",
opacity: '0.5',
})
jQuery('#answer-container').droppable({
drop: function(event, ui) {
jQuery('#answer-container1').append(ui.draggable);
}
})
jQuery('.ziel').droppable({
accept: ".drop",
drop: function(event, ui) {
jQuery(this).append(ui.draggable);
jQuery(this).droppable('option', 'accept', ui.draggable);
},
out: function(event, ui) {
console.log('out');
jQuery(this).droppable('option', 'accept', '.drop')
}
})
jQuery('#submitButton').click(function() {
jQuery('.ziel').each(function() {
//let myText = jQuery(this).text().trim();
//let result = myText.replace(/ /g,'');
arr.push(jQuery(this).text().trim());
console.log(arr);
console.log(lösungen);
})
//arr = jQuery(".ziel").text().split(" ").slice(0,-1);
for (var i = 1; i <= lösungen.length; i++) {
if (arr[i - 1] == lösungen[i - 1]) {
jQuery('#result' + i).html('<b>correct, good job!!</b> 👍');
jQuery('#ziel' + i).css('background-color', '#5cb85c');
} else {
jQuery('#result' + i).html(" richtig ist: " + "<b>" + lösungen[i - 1] + "</b>");
jQuery('#ziel' + i).css('background-color', '#d9534f');
jQuery('.tipp' + (i)).removeClass('hidden');
}
console.log(arr.length);
}
jQuery('.ziel li').draggable('destroy');
//return false;
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="test-container" class="col-sm-8">
<div class="table">
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❶</b></span>Joe</div>
<div class="table-cell border ziel" id="ziel1">
<ul class="ziel1"></ul>
</div>
<div class="table-cell"> Jazz.</div>
</div>
<div class="table-cell small"></div>
<div id="result1"></div>
<div><a button="" class="btn btn-success tipp1 hidden" aria-hidden="true" href="#8" title="Joe hates Jazz" data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content="'Joe' entspricht 'he' (3. Person Einzahl), deswegen 'hates'.">Tipp</a></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❷</b></span>Sue</div>
<div class="table-cell border ziel" id="ziel2">
<ul class="ziel1"></ul>
</div>
<div class="table-cell"> football.</div>
</div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div><a button="" class="btn btn-success tipp2 hidden" aria-hidden="true" href="#8" title="Sue plays football" data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content="'Sue' entspricht 'she' (3.Person Einzahl), deswegen 'plays'.">Tipp</a></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❸</b></span>We</div>
<div class="table-cell border ziel" id="ziel3">
<ul class="ziel1"></ul>
</div>
<div class="table-cell"> Marihuana.</div>
</div>
<div class="table-cell small"></div>
<div id="result3"></div>
<div><a button="" class="btn btn-success tipp3 hidden" aria-hidden="true" href="#8" title="We don't smoke Marihuana" data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content="'we' (1.Person Mehrzahl), deswegen 'don't smoke'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❹</b></span>I</div>
<div class="table-cell border ziel" id="ziel4">
<ul class="ziel1"></ul>
</div>
<div class="table-cell">hard every day.</div>
</div>
<div class="table-cell small"></div>
<div id="result4"></div>
<div><a button="" class="btn btn-success tipp4 hidden" aria-hidden="true" href="#8" title="I work hard..." data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content="'I' (1.Person Mehrzahl), deswegen 'work'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❺</b></span>They</div>
<div class="table-cell border ziel" id="ziel5">
<ul class="ziel1"></ul>
</div>
<div class="table-cell"> to Hank Williams .</div>
</div>
<div class="table-cell small"></div>
<div id="result5"></div>
<div><a button="" class="btn btn-success tipp5 hidden" aria-hidden="true" href="#8" title="They do not listen..." data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content="'they' (2.Person Mehrzahl), deswegen 'do not listen'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❻</b></span>Bill</div>
<div class="table-cell border ziel" id="ziel6">
<ul class="ziel1"></ul>
</div>
<div class="table-cell">to live in Suabia.</div>
</div>
<div class="table-cell small"></div>
<div id="result6"></div>
<div><a button="" class="btn btn-success tipp6 hidden" aria-hidden="true" href="#8" title="Bill does not want to live..." data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content="'Bill' ist 'he' (3.Person Mehrzahl), deswegen 'does not want'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❼</b></span>You</div>
<div class="table-cell border ziel" id="ziel7">
<ul class="ziel1"></ul>
</div>
<div class="table-cell">drinking lemonade.</div>
</div>
<div class="table-cell small"></div>
<div id="result7"></div>
<div><a button="" class="btn btn-success tipp7 hidden" aria-hidden="true" href="#8" title="You love drinking lemonade." data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content=" 'you' (2.Person Einzahl), deswegen 'love'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❽</b></span>I</div>
<div class="table-cell border ziel" id="ziel8">
<ul class="ziel1"></ul>
</div>
<div class="table-cell">the New York Times.</div>
</div>
<div class="table-cell small"></div>
<div id="result8"></div>
<div><a button="" class="btn btn-success tipp8 hidden" aria-hidden="true" href="#8" title="I read the New York Times." data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content=" 'I' (1.Person Einzahl), deswegen 'read'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result2"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❾</b></span>We</div>
<div class="table-cell border ziel" id="ziel9">
<ul class="ziel9"></ul>
</div>
<div class="table-cell">the A-Team every day.</div>
</div>
<div class="table-cell small"></div>
<div id="result9"></div>
<div><a button="" class="btn btn-success tipp9 hidden" aria-hidden="true" href="#8" title="We watch the A-Team every day." data-toggle="popover" data-placement="top" data-trigger="hover" style="text-decoration: none, color:white" data-content=" 'we' (1.Person Mehrzahl), deswegen 'watch'.">Tipp</a></div>
<div class="table-cell small"></div>
<div id="result"></div>
<div class="table-row">
<div class="table-cell small"><span class="number"><b>❿</b></span>You</div>
<div class="table-cell border ziel" id="ziel10">
<ul class="ziel10"></ul>
</div>
<div class="table-cell">only big cars.</div>
</div>
<div class="table-cell small"></div>
<div id="result10"></div>