Drag and Drop using touch

Scheduler
#1

Hi,

We have drag and drop from an outside list of items working currently, but it does not work for touch devices. It is an Angular 17 app. Pretty straightforward code. We add draggable=“true” to list of items to drag, and then add event listeners to the document to handle the drop.

document.addEventListener("dragover", function (event) {
            // prevent default to allow drop
            let e: any = event;
            // console.log(e.target.parentElement.parentElement.classList);
            if (e.target.parentElement.classList.contains("dhx_cal_data") || e.target.parentElement.classList.contains("dhx_scale_holder_now") || e.target.classList.contains("schedule-block"))
                event.preventDefault();
        }, false);



        document.addEventListener("drop", function (event) {
            var action_data = that.scheduler.getActionData(event);
            let e: any = event;
         if (e.target.parentElement.classList.contains("dhx_cal_data") || e.target.parentElement.classList.contains("dhx_scale_holder_now") || e.target.classList.contains("schedule-block")) {
         
...

What is the best way to get this working with touch?

Thanks,
Larry

#2

Hi @Larry,

It’s hard to suppose what exactly goes wrong without seeing some working demo and testing, but here is a working demo that allows to drag items inside scheduler using mouse/touch:
https://snippet.dhtmlx.com/hz8rlubs

If you still won’t be able to make this functionality work, could you please reproduce the issue in the demo above(open the demo => reproduce the issue => click the “Save” button => send me the new link)?

Kind regards,

#3

I got it all to work using this library

Works pretty good. The only thing that doesn’t is trying to resize with touch. Seems to want to always do a move.

Thanks,
Larry