adapting drag drop features to touchscreen for twine sugarcube

Authoring Twine
1

Twine Version: 2.11.1
Sugarcube 2.27.3

I have coded some mouse activated drag drop functions into my Twine Sugarcube game, which are working nicely. But I had no idea how difficult it would be to now adapt to include touch screen drag and drop. Any suggestions for sources of sample code?

My immediate issue is getting the ID of the element being dragged. Here is the beginning of the working drop code

window.drop1 = function (ev) {
    ev.preventDefault();
  	
    // Get the ID of the dragged element
    var data = ev.dataTransfer.getData("text");
    const draggedElement=document.getElementById(data);
    console.log("data="+data);
    console.log("draggedElement"+draggedElement);
    };

I’m especially interested in getting a reference to the code stored in the “data” variable, which I haven’t been able to do in my touchscreen adaptation.

and a snippet of the parallel code in the not working touch screen adaptation

let touchElement = null;

window.touchStart = function(ev) {
    touchElement = ev.target;
    
    touchElement.style.position = 'absolute';
    
};

window.touchEnd1 = function(ev){
	ev.preventDefault();
    
    var data = touchElement.id;
    const draggedElement=document.getElementById(data);
  };
2

Upon further testing, I realize that my original code,unmodified, already handles touchscreen interactions, it’s just that it takes a rather long period of contact before the drag event registers.

Which raises even more questions in my mind. How do devices handle touch screen interactions, even though I haven’t explicitly defined a touchStart or touchEnd function in my code?

What variables determine the length of time the device takes to distinguish between a click event and a dragStart event?

I’ve tested this on both Chromebook running a chrome browser and an iPhone running a safari browser. My code works on both (putting aside the long delay time on touch-drag initiation). Are there any common touch screen devices that would not natively implement a touchscreen drag and drop without me writing additional customized code (several resources have warned me that HTML5 does not offer native support for touchscreen.)

3

Most touch devices have proxies for mouse events, including drag events, built in, because so many sites don’t implement the touch interfaces.

1 Like
4

While mobile devices became mainstream for most between the late 1990s and the early 2000s, Touch events weren’t added to web-browsers until the early 2010s and they still aren’t fully supported by the main web-browsers yet. This delay in implementation & support for Touch is why mobile devices (mostly) support the Mouse events system. It also doesn’t help that Touch events were “superseded” by the Pointer events system in the mid to late 2010s, but at least that is (mostly) supported by all major web-browser brands on both Desktop and Mobile devices.

1 Like