Use SortableJS on AnkiMobile?

Anki Card Design
1

I’m working on a Duolingo-type word bank minigame (similar to the Clozemaster minigame I shared recently), where you reorder words from a word bank into a sentence. I’ve used SortableJS so I can drag and drop words into the correct place. It works perfectly on desktop, but I just can’t get it to work on mobile. Any ideas what I’m doing wrong? I feel like the solution must be completely obvious, but I’m not a programmer, and I just can’t figure it out.

Here’s the SortableJS demo, which, again, works on Anki desktop but not mobile:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>


<!-- Latest Sortable -->
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>


<!-- Simple List -->
<ul id="simpleList" class="list-group">
	<li class="list-group-item">This is <a href="http://SortableJS.github.io/Sortable/">Sortable</a></li>
	<li class="list-group-item">It works with Bootstrap...</li>
	<li class="list-group-item">...out of the box.</li>
	<li class="list-group-item">It has support for touch devices.</li>
	<li class="list-group-item">Just drag some elements around.</li>
</ul>

<script>
    // Simple list
    Sortable.create(simpleList, { /* options */ });
</script>

Any help is greatly appreciated!

2

I do not own any apple products so cannot help directly.

But maybe you can gather more info with this:

That might help to identify the issue and solve your problem.

2 Likes
3

Thank you, I will look into this.

4

Got it. I had to use an onload attribute to create the sortable when the script had loaded, as follows:

<script onload="createSortable()" src="http://SortableJS.github.io/Sortable/Sortable.js"></script>

. . .

<script>
function createSortable() {
    Sortable.create(simpleList, { /* options */ });
}
</script>

Thank you @Anon_0000 for your help.

1 Like