trouble with JavaScript-Code

Question

Hi everybody,

I am going crazy here. I have this .js-code allowing the user to drag and drop a sentence into the right order. TME had helped me with it some time ago. Since then, I had it updated to behave nicely on mobile devices. You can see a working example here. As you can see, it works horizontally on large-screen devices and switches to a vertical layout on smaller screens. So far so good.

Then I wanted to include that function into a bigger project, a language placement test. So I copied all the CSS and all the Story's Javascript from the working example provided above to the new file, available here. (I provided links to the affected passages on the bottom of the starting passage)

For some reason, the drag-and-drop behaviour doesn't work in the new file. The function draginit is called exactly in the same way as in the working example - I can not figure out where the problem is.

Any help is greatly appreciated.

Answer 1

... the drag-and-drop behaviour doesn't work in the new file...

I did a quick test of some of the Passages accessed via the "Level X EX Y" buttons on the linked page and noticed that the horizontal based drag-n-drop worked while the vertical drag-n-drop didn't, so I will assume that your issue is with the vertical ones.

I looked at the HTML source code for one of the vertical based lists as well as the Javascript source code for the setDrag() function and noticed that display attribute of the vertical based span elements is still the defaul of inline. I believe this combined with the width attribute being set to 100% is what is causing your issue.

I got the vertical based drag-n-dropping to work by simply making the following changes to the vertical section of the setDrag() function.

$('span.drag').css({"width":"","display":"block"});