{"id":3252,"date":"2013-08-29T16:39:31","date_gmt":"2013-08-29T23:39:31","guid":{"rendered":"http:\/\/g-liu.com\/blog\/?p=3252"},"modified":"2013-11-21T15:09:00","modified_gmt":"2013-11-21T22:09:00","slug":"javascript-quick-tip-onmousedrag-onclick-onmousemove","status":"publish","type":"post","link":"https:\/\/g-liu.com\/blog\/2013\/08\/javascript-quick-tip-onmousedrag-onclick-onmousemove\/","title":{"rendered":"JavaScript quick tip: onMouseDrag (onClick + onMouseMove)"},"content":{"rendered":"<p>Since HTML5 came out, I&#8217;ve been wondering if JavaScript had an onMouseDrag event. Turns out they don&#8217;t.<\/p>\n<p>The fictional onMouseDrag event would fire when a user clicks, holds, and drags their mouse across an element on the screen. This could be useful with HTML5 sliders, like such:<\/p>\n<p><script src=\"\/blog\/wp-content\/scripts\/onmousedrag.js\"><\/script><\/p>\n<p><input type=\"range\" max=\"5\" min=\"0\" step=\"0.01\" value=\"1\" onmousemove=\"changeNum(this)\" \/><br \/>\n<label for=\"num\"> Value of slider:<\/label><br \/>\n<input id=\"gposdfupwierrdbaiuofyr\" type=\"text\" name=\"num\" value=\"1\" size=\"3\" maxlength=\"3\" \/><\/p>\n<p>Say we wanted to change the number in the text field as we drag the slider. We only want to change it if we&#8217;re 1) holding down the mouse button <i>and<\/i> 2) we&#8217;re dragging the mouse. Unfortunately, the answer is not <code>onclick&amp;&amp;onmousemove=\" ... \"<\/code>, but there is an easy way to achieve the effect.<br \/>\n<!--more--><br \/>\nAt the top of your JS, put in the following lines:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar isMouseDown = false;\r\ndocument.onmousedown = function() { isMouseDown = true };\r\ndocument.onmouseup   = function() { isMouseDown = false };\r\n<\/pre>\n<p>On the slider (or whatever HTML element), you should have an onmousemove event. For example:<br \/>\n<code>&lt;input onmousemove=\"yourFunction();\" type=\"range\" \/&gt;<\/code><\/p>\n<p>In the onmousemove function, wrap all the code inside the function with a simple <code>if<\/code> statement:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction yourFunction() {\r\n    if(isMouseDown) {\r\n        \/\/ your function code here.\r\n    }\r\n}\r\n<\/pre>\n<p>Done!<\/p>\n<h1>Why does the mouse have to be down?<\/h1>\n<p>There is one major pitfall of using onmousemove without checking the mouse button status. Say you were to enter a number into the number field. When you hover over your slider, that number will change to whatever&#8217;s set on the slider, which is a terrible UI design flaw.<\/p>\n<h1>Demo<\/h1>\n<p>Of course, no coding tutorial is complete without a demo. You can see a demo <a href=\"http:\/\/g-liu.com\/sandbox\/onmousedrag\/\">here<\/a>.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><!-- AddThis Related Posts generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Since HTML5 came out, I&#8217;ve been wondering if JavaScript had an onMouseDrag event. Turns out they don&#8217;t. The fictional onMouseDrag event would fire when a user clicks, holds, and drags their mouse across an element on the screen. This could be useful with HTML5 sliders, like such: Value of slider: Say we wanted to change the number in the text &#8230;<!-- AddThis Advanced Settings generic via filter on wp_trim_excerpt --><!-- AddThis Share Buttons generic via filter on wp_trim_excerpt --><!-- AddThis Related Posts generic via filter on wp_trim_excerpt --><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"#JavaScript quick tip: onMouseDrag (onClick + onMouseMove) http:\/\/wp.me\/p2Zt3y-Qs #webdesign","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[830,52],"tags":[],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Zt3y-Qs","_links":{"self":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/3252"}],"collection":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/comments?post=3252"}],"version-history":[{"count":13,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/3252\/revisions"}],"predecessor-version":[{"id":3942,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/3252\/revisions\/3942"}],"wp:attachment":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/media?parent=3252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/categories?post=3252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/tags?post=3252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}