From the mouse to your fingers – traditional drag and drop in the iPad

I have done some UI components before, supporting some drag and drop. I recently got an ipad, and the old components can’t be dragged away or moved on these handheld devices. Later, I thought of a way to simulate the operation of the mouse with the touch event, which is to use the touch response event to trigger the mouse event. Not much to say, upload the code, please take a picture

Js code

1. functionisTouchDevice(){
2. return‘ontouchstart’in window;
3. }

< li style="font-size:1em; margin:0px 0px 0px 38px; padding:0px 0px 0px 10px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(209,215,220) ; background-color:rgb(250,250,250); line-height:18px">

4. functionfitTouchDevice() {
5. if (!isTouchDevice()) {
6. return;
7. li>
8. function simMouseEvt(type, target, pos) {
9. varevt= document. createEvent(‘MouseEvents’);
10. evt.initMouseEvent(type, true, true, document,
11. 0, pos.screenX, pos.screenY, pos.clientX, pos.clientY ,
12. false, false , false, false,
13. 0 , Target);
14. return target.dispatchEvent(evt);
17. document. addEventListener(“touchstart”, function(e){
18. if (!simMouseEvt(“mousedown”, e.target, e.changedTouches[0])) {
19. e.preventDefault();
20. setTimeout(function(){ /span>
21. span class=”keyword” style=”color:rgb(127,0,85); font-weight:bold”>if (!e.target.getAttribute(“movement”)) {
22. E.target.removeAttribute(“movement”);
23. simMouseEvt(“click”, e.target, e.changedTouches[ 0])
25. , 100);
27. ));
28. document.addEventListener(“touchmove”,function(e){
29. e.target.setAttribute(“movement”,“move”);
30. simMouseEvt(“mousemove”, e.target, e .changedTouches[0])|| e.preventDefault();
31. });
32. document.addEventListener(“touchend”, function( e) {
33. e.target.removeAttribute (“movement”);
34. simMouseEvt(“mouseup”, e.target, e.changedTouches[0])||e .preventDefault();
35. li>
36. }

currently only tested on ipad and android phones , The idea is workable.

Js code

1. function isTouchDevice(){
2. return ‘ontouchstart’ in window;
3. }
4. /span>
5. function fitTouchDevice(){
6. if(!isTouchDevice()) {
7. return;
8. }
9. function simMouseEvt(type, target, pos){
10. var evt = document.createEvent(‘MouseEvents’);
11. evt.initMouseEvent(type, true, true, document,
12. 0, pos.screenX, pos.screenY, pos. clientX, pos.clientY,
13. false,false, false, false,
14. 0, target);
15. return target.dispatchEvent(evt);
16. }
18. document.addEventListener(“touchstart”, function(e){
19. if(!simMouseEvt (“mousedown”, e.target, e.changedTouches[0])) {
20. e.preventDefault();
21. setTimeout(function(){
22. if(!e.target.getAttribute(“movement”)) {
23. e.target.removeAttribute(“movement”);
24. simMouseEvt(“click”, e.target, e.changedTouches[0])
25. }
26. 100);
28. });
29. document.addEventListener(“touchmove”, function(e){
30. e.target.setAttribute(“movement”, “move”);
31. simMouseEvt(“mousemove” span>, e.target, e.changedTouches[0]) || e.preventDefault();
32. ));
33. document.addEventListener(“touchend”, function(e){
34. e.target.removeAttribute(“movement”);
35. simMouseEvt(“mouseup”, e.target, e. changedTouches[0])|| e.preventDefault();
36. ));
37. }

Js code

Js code