Home > Others

The difficult analysis of drag-and-drop action in jquery mobile browser _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article analyzes the difficulty of dragging and dragging in jquery Mobile browser. Share to everyone for your reference. Specifically as follows:

I wanted to implement a control button like the iphone that I could drag on my mobile Web page, but I finally found naught,

While drag-and-drop is commonplace in mobile browsers, it is impossible to implement a component that can be dragged and pulled in a mobile browser.

First take a look at the PC Web page, drag action is how to do,

First of all, we have a button, click on the action, has been pressed, you can drag, like the iphone can drag the control button,

As the gray layer above, it is not very easy to write.

First of all, to turn the position property of the gray layer into Abosulte, then the main point in the jquery script is to distinguish between click and Mousedown+mouseup, because the click is equal to mousedown+ MouseUp, but fortunately, mousedown a period of time, immediately unbind empty layer to cilck the binding of action, tell the system, MouseDown after the action and click-Independent, see the following realistic code:

Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jqdrag</title>
<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=no" >
<script type= "Text/javascript" src= "Js/jquery-1.11.1.js" ></script>

<body>
<div id= "mydiv" style= "width:100px; height:100px; Background: #999; Position:absolute; " >out</div>
</body>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var timeout;

$ ("#mydiv"). MouseDown (function (e) {
/* equivalent to MouseDown immediately after the judge, in the end the user has not pressed more than 1 seconds, there is a decision for the long press * *
$ ("#mydiv"). Click (function () {
$ ("#mydiv"). Text ("clicked");
});
Timeout = settimeout (function () {
$ ("#mydiv"). Text ("long Press");
/* The following statement, the user left mouse button, will not be judged as click action
$ ("#mydiv"). Unbind ("click");
$ ("#mydiv"). MouseMove (function (e) {
/* Here is for the mouse to drag and drop the layer to move, the mouse just in the middle of the layer * *
Document. getElementById ("Mydiv"). Style.left = e.pagex-50 + "px";
Document. getElementById ("Mydiv"). Style.top = e.pagey-50 + "px";
});
}, 1000)
});

$ ("#mydiv"). MouseUp (function () {
Cleartimeout (timeout);
/* Here must clear MouseMove action, otherwise the layer will always bind MouseMove action, with the mouse moving and moving.
$ ("#mydiv"). Unbind ("MouseMove");
$ ("#mydiv"). Text ("Out");
});

$ ("#mydiv"). Mouseout (function () {
Cleartimeout (timeout);
$ ("#mydiv"). Unbind ("MouseMove");
$ ("#mydiv"). Text ("Out");
});
});
</script>

The reason is also to write mouseout events, and the previous "jquery implementation of a long press button to trigger events," the same article, to prevent the browser, smear black to avoid the MouseUp to determine the bug.
The above looks very perfect, because in the PC each big browser test passes, also perfect compatible IE8, it is beautiful like painting,

But when it came to the phone, it was a big problem,

Only in Google browser in the mobile phone debugging mode, has not been to the real machine, it can not be used!

The jquery Click event has no problem in the mobile browser, but the long press event has clashed with the right key function on the phone, even if it is in jquery Mobile. On ("Taphold", function () {}); Event or in the above MouseDown add E.preventdefault (), IE use Window.event.preventDefault (), I disable the mobile phone browser's own menu, also can only make the long press function to retain, drag is not to think about, Because drag the most important function is MouseMove action, mobile phone browser does not support MouseMove () action.

So, someone protested, you can use the jquery UI of the Draggable () and Jquerymobile in the swipe event, really HTML5 in the drag-and-drop event Ah!

However, all the above solutions are futile,

For the. draggable () in the jquery UI, the swipe event in the Jquerymobile, the drag-and-drop event in the HTML5 can be used in the browser's mobile-phone debug mode and found to be impossible to drag.

I hope this article will help you with your jquery programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery in action r in action data analysis and graphics with r drag and drop file upload jquery drag and drop in selenium webdriver jquery drag drop plugin get browser name in jquery view website in mobile browser

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More