Simple HTML 5 drag-and-drop -- what am I doing wrong?

jc3

Hi, there.

I'm newish to Twine, but was interested in trying out a javascript/html interface for a game idea.  In a browser, this functions about as I want it to, but after trying a few things in Twine (using Sugarcane) I'm still getting errors I don't get otherwise.  I'm wondering if I'm completely misunderstanding how to integrate these things.  Help would be tremendously appreciated.

This was what I was trying to adapt, which works as it should outside of Twine:

<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>

<p>Drag the image into the box:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="blue_circle.gif" draggable="true" ondragstart="drag(event)>



...in twine, though, I have tried a few things and keep getting an error that says "ReferenceError: drag is not defined at HTMLImageElement.ondragstart".

Specifically, I tried:
[list type=decimal]
That whole thing, copied to a passage without changes
Cutting out the part between script tags and moving it to another passage with was tagged with "script" (brown).
Cutting out the part between script tags and moving it to an external .js file and loading it with a macro
Trying to make #2 into macro itself and adding the <<macroname>> to the corresponding passage


...I was never able to get rid of that error, though, nor get the dragging to work, so I think I must be missing something basic about how I'm supposed to use things other than twinecode with twine.  Sorry if this is obvious.  Still would be super grateful if someone could point me in the right direction, if only so I can get a better handle on how I'm supposed to use javascript with twine.  Thanks in advance.

Author X

I seem to recall reading in another thread that global functions are not allowed (that may have only been in Sugarcube?). The solution was to attach the function to the Window object:

Window.drag = function (ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

jc3

Hmm. I gave that a quick try, changing the contents of my script passage to the below, but still seeing the same error message and same results.  Do I have something wrong?  (And thank you very much for the speedy reply, by the way).

Window.allowDrop = function (ev){
ev.preventDefault();
}

Window.drag = function (ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

Window.drop = function (ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}


;

TheMadExile

You're also missing the closing quote on your <img> tag's ondragstart attribute.

EDIT: Attached a working example.

jc3

Oh, gosh, that was thoughtless of me.

Thank you so much for this; works perfectly and I now feel like a have a better handle on the general case.