How to create a draggable div

Authoring Twine
,
1

I would like to ask how to create a draggable div. I believe this is possible using JS although I am a very beginner in this language.

2

Prob. easiest to use draggable : https://jqueryui.com/draggable/

It’s pretty straightforward. This is a pretty good tutorial : https://www.youtube.com/watch?v=WLdlB76wqv0

Ade.

3

Unfortunately, it’s a bit more complicated to use jQuery UI in Twine than it would be normally. So, let me save you the trouble of figuring it all out on your own like I did. :stuck_out_tongue_winking_eye:

To use jQuery UI in Twine with the SugarCube story format, first you’ll first want to create a jQuery UI theme and download it. You should extract the files from that download into your game’s directory.

Once you’ve done that, to load jQuery UI into Twine when using the SugarCube story format, you’ll want to put something like this in your JavaScript section:

if (window.hasOwnProperty("storyFormat") || (document.location.href.indexOf("AppData") !== -1)) {
	// Change this to the path where this HTML file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Games/MyGame/";  // Running inside Twine application
} else {
	setup.Path = "";  // Running in a browser
}
setup.ImagePath = setup.Path + "images/";
setup.SoundPath = setup.Path + "sounds/";

/* Load jQuery UI - Start */
setup.JSLoaded = false;
importStyles(setup.Path + "jquery-ui.min.css");
importScripts(setup.Path + "jquery-ui.min.js")
	.then(function() {
		setup.JSLoaded = true;
	}).catch(function(error) {
		alert(error);
	}
);
/* Load jQuery UI - End */

You’ll need to change "C:/Games/MyGame/" to the path to your game’s directory, and that should make sure that it works both when run from within Twine and with the published version.

Then, in any passages where you have the draggable element (with an ID of “draggable” for this example), instead of using the standard JavaScript code, which looks like something like this:

<script>
$(function() {
	$("#draggable").draggable();
});
<script>

You’d have to put something more like this in the passages where you use a draggable element (preferably at the bottom):

<<script>>
$(document).one(":passagerender", function(event) {
	var dragID = "#draggable", jQIntervalID = 0;
	function ActivatejQueryUI() {
		if (setup.JSLoaded) {
			clearInterval(jQIntervalID);
			if ($(dragID).length > 0) {
				$(dragID).draggable();
			}
		}
	}

	if (setup.JSLoaded) {
		$(event.content).find(dragID).draggable();
	} else {
		jQIntervalID= setInterval(ActivatejQueryUI, 100);
	}
});
<</script>>

That would wait for the passage to be ready, and just before SugarCube displays it, it would connect jQuery UI’s draggable() functionality to the element with the id="draggable" attribute. However, if the jQuery UI JavaScript isn’t loaded yet, it would wait for it to be loaded before trying to connect it.

I’m sure that looks a bit complicated, but really, that just removed all of the hard parts for you, so all you need to do is put in the appropriate file path and element ID, and it should all work fine.

Please let me know if you have any questions on any of that, and have fun! :slight_smile:

EDIT: I wrote up an extended version of this answer and added it to my Twine/SugarCube sample code collection here: “Using jQuery UI in Twine”

1 Like