Analysis of the difficulty of drag and drop actions in jQuery mobile browser_jquery

This article uses an example to analyze the difficulty of dragging and dropping in jQuery mobile browsers. Share it with everyone for your reference. The details are as follows:

I originally wanted to implement a control button that can be dragged at will like an iPhone in the mobile webpage, but in the end I found that it was all in vain,

Although drag and drop actions are common in mobile browsers, it is impossible to implement components that can be dragged and dropped in mobile browsers.

Let’s first take a look at how drag and drop actions are performed on PC web pages,

First of all, we have a button that takes action when clicked. If you keep pressing it, you can drag it at will, just like the control button on the iPhone that you can drag at will.

It is not easy to write the gray layer as shown above,

First of all, we need to change the position attribute of the gray layer to abosulte. Then the main point of the work to be implemented in the jquery script is to distinguish the pair of click and mousedown mouseup actions, because click is originally equal to mousedown mouseup, but okay, After mousedown for a period of time, unbind immediately clears the layer's binding to the cilck action, telling the system that the action after mousedown has nothing to do with click. See the following actual code:

Copy code The code is as follows:

 
 
 
 
 
 
 
 
 
 

out

 
 
 

The reason why we need to write a mouseout event is the same as the previous article [JQuery implements long-press button triggering event] to prevent the bug in the browser from being blackened and evading mouseup judgment.
The above looks very perfect, because it has been tested on all major PC browsers and is perfectly compatible with IE8. It is really picturesque,

However, once it comes to the mobile phone, there is a big problem,

Only in the mobile phone debugging mode in Google browser, it cannot be used before it is on a real device!

There is no problem with jquery's click event in mobile browsers. However, the long press event conflicts with the right-click function of the system on the phone, even if it is replaced with .on("taphold" in jquery mobile , function (){}); event or add e.preventDefault() to the mousedown above; IE uses window.event.preventDefault(); I disable the mobile browser's built-in menu and can only use long The function of pressing is retained, and there is no need to think about dragging, because the main function of dragging is the mousemove action, and mobile browsers do not support the mousemove() action at all.

So, someone protested, you can use .draggable() in jquery ui and the swipe event in jquerymobile, which is actually the drag event in html5!

However, all the above solutions are in vain,

For .draggable() in jquery ui, the swipe event in jquerymobile, and the drag event in html5, you can use the mobile debugging mode of the browser, and you find that you can't drag at all.

I hope this article will be helpful to everyone’s jquery programming design.