CODEWITHSUNDEEP
javascripthtmldrag-and-dropdrag
afdggfh
afdggfh

Reputation: 135

Detecting mouse click, move, and release (aka drag) without having to drag an object in html5

I am writing a simple timetable application in HTML5. I want the user to be able to enter events (such as Concerts, Lectures, etc.), by clicking inside a div, then drag and release the mouse to control the duration of an event (similar to the calendar Application in mac os). I then insert another div of appropriate height representing the event into the first div. I accomplished this by listening for mousedown, mousemove, and mouseup events. Drag and drop wasn't an option, since there is no node being dragged. However, my solution does not work on mobile devices. I tried to implement the same functionality using ondragstart, ondrag, and ondragend, but I didn't even manage to get ondrag and ondragend to fire in firefox. What can i do to make this work on mobile devices?

TL;DR: How do I capture a mouse drag without a draggable object or drop zone on mobile devices?

Upvotes: 0

Views: 403

Answers (1)

Alexander Hemming
Alexander Hemming

Reputation: 801

to have that work on mobiles you need a "touch api" https://developer.mozilla.org/en-US/docs/Web/API/Touch

added to the drag and drop api you alreadt use: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

A detailed explanation of this is available here: https://medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5

If you use the jquery there is a toutch patch for its drag and drop api shown here: https://1stwebdesigner.com/chart-js-library/

Upvotes: 1

Related Questions