the element is still draggable even if I set "draggable" attribute as false

[mdg6496]

My intention was to make

element draggable after holding finger for certain time.

option1.

----- from html ------
div class="boxA" draggable="false"

----- from javascript ------
["boxA" element].addEventListener('touchscreen', function () {

setTimeout(function() {
  ["boxA" element].setAttribute('draggable', true);
}, 2500);

});

but it seems like I can drag the "boxA" div without any delay (hence ignoring draggble "false" value).

I tried another way by removing draggable attribution from html and add it from javascript but it wouldnt allow me to drag

option2.

----- from html ------
div class="boxA"

----- from javascript ------
["boxA" element].addEventListener('touchscreen', function () {

setTimeout(function() {
  ["boxA" element].setAttribute('draggable', true);
}, 2500);

});

is there any way to temporarily disable drag & drop feature on mobile screen?

[Bernardo-Castilho]

You can turn dragging on and off by setting the "draggable" attribute on certain elements.

For example, in the sample used with the project, the code below disables dragging the first element and re-enables it after five seconds:

	// disable dragging for the first element in #columns
	var e = document.querySelector("#columns div");
	e.setAttribute("draggable", "false");
	console.log("you cannot drag the first element");

	// re-enable dragging after 5 seconds
	setTimeout(() => {
		e.setAttribute("draggable", "true");
		console.log("you can drag the first element");
	}, 5000);

But what you are describing is a little different. Seems like you want to add a certain delay before dragging can start.

If that is the case, then maybe you should modify the _shouldStartDragging function in the DragDropTouch class.

The function looks like this:

        // start dragging when specified delta is detected
        DragDropTouch.prototype._shouldStartDragging = function (e) {
            var delta = this._getDelta(e);
            return delta > DragDropTouch._THRESHOLD ||
                (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD);
        }

You could add an additional test to make sure dragging only starts after a certain delay, e.g.

        // start dragging when specified delta is detected
        DragDropTouch.prototype._shouldStartDragging = function (e) {

            // start dragging only after 3 seconds
            if (Date.now() - this._lastTouch.timeStamp < 3000) {
                return false;
            }

            var delta = this._getDelta(e);
            return delta > DragDropTouch._THRESHOLD ||
                (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD);
        }

I hope this information helps.