{"id":1140,"date":"2017-04-06T07:34:19","date_gmt":"2017-04-06T14:34:19","guid":{"rendered":"http:\/\/somethingk.com\/main\/?p=1140"},"modified":"2017-04-06T07:34:19","modified_gmt":"2017-04-06T14:34:19","slug":"javascript-cloning-and-moving-dom-elements-to-mouse-position","status":"publish","type":"post","link":"https:\/\/somethingk.com\/main\/javascript-cloning-and-moving-dom-elements-to-mouse-position\/","title":{"rendered":"Javascript Cloning and Moving DOM Elements to Mouse Position"},"content":{"rendered":"<section id=\"text-4\" class=\"widget boka-widget widget_text amr_widget\">\t\t\t<div class=\"textwidget\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block; text-align:center;\"\r\n     data-ad-layout=\"in-article\"\r\n     data-ad-format=\"fluid\"\r\n     data-ad-client=\"ca-pub-7619916617995509\"\r\n     data-ad-slot=\"9102150708\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\t\t<\/section>\n<p>So I was working with <a href=\"https:\/\/github.com\/bevacqua\/dragula\">dragula<\/a>, a super easy to use drag and drop library. However, I ran into an issue where when a user clicks the dragging element, I wanted everything in the background to collapse. This messed up the dragging element&#8217;s position in relation to where the mouse&#8217;s location. In most cases when you drag and drop an element, it hovers wherever your mouse is located. In my case, when I shifted everything, the element I wanted to drag was no longer located where I clicked but rather it moved and hovered in the wrong spot with the wrong offset from my mouse. In using this library, I didn&#8217;t have access to changing their inner coding offset logic, so I needed to come up with my own fix. In the end, I decided to hide their floating mouse DOM element and create my own, that I had control over. The following code shows how to do just that!<\/p>\n<p>Happy coding! Let me know if you have any comments or improvements.<\/p>\n<div class=\"snippetcpt-wrap\" id=\"snippet-1142\" data-id=\"1142\" data-edit=\"\" data-copy=\"\/main\/wp-json\/wp\/v2\/posts\/1140?snippet=c3714dc077&#038;id=1142\" data-fullscreen=\"https:\/\/somethingk.com\/main\/code-snippets\/javascript-cloning-and-moving-dom-elements\/?full-screen=1\">\n\t\t\t\t<pre class=\"prettyprint linenums lang-javascript\" title=\"Javascript Cloning and Moving DOM Elements\">\/\/call this function when we want to initiate the listener for moving the mouse\r\n\/\/For instance, call this function once the user starts dragging an element\r\n\/\/requires an event and element to be passed.\r\nfunction startMouseMove(e, element) {\r\n    $('.my-background-content').css( 'display', 'none' ); \/\/collapse background elements\r\n    const container = $(element).find('.item-to-clone').clone().appendTo('.my-container'); \/\/clone the element you want to hover around mouse\r\n    $(container).attr('id', 'cursor_element'); \/\/give the clone element an id so we can reference it later\r\n    $('#cursor_element').css({'position': 'fixed', 'top': e.pageY, 'left': e.pageX}); \/\/set clone element's position to mouse's position\r\n    $document.on('mousemove', moveElement); \/\/bind mouse event\r\n}\r\n \r\nfunction moveElement(e) {\r\n    const y = e.pageY; \/\/get y position\r\n    const x = e.pageX; \/\/get x position\r\n    $('#cursor_element').css({'top': y, 'left': x}); \/\/move the position of the element to match mouse, whenever mouse moves\r\n}\r\n \r\n\/\/call this function when we want to stop the listener for moving the mouse\r\n\/\/For instance, call this function once the user drops a dragging element\r\nfunction stopMouseMove() {\r\n    $('#cursor_element').remove(); \/\/delete cloned element\r\n    $('.my-background-content').css( 'display', '' ); \/\/un-collapse background elements\r\n    $document.unbind('mousemove', moveElement); \/\/unbind mouse event\r\n}<\/pre>\n\t\t\t<\/div>\n<p>Note that $document and JQuery must be declared\/injected into the controller for this to work.<\/p>\n<p>The above code requires JQuery, but you could easily use vanilla Javascript.\u00a0Check <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MouseEvent\">this<\/a> out for event help and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\">this<\/a> out for DOM selection.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So I was working with dragula, a super easy to use drag and drop library. However, I ran into an issue where when a user clicks the dragging element, I wanted everything in the background to collapse. This messed up the dragging element&#8217;s position in relation to where the mouse&#8217;s location. In most cases when you drag and drop an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[177],"tags":[617,620,621,619,611,323,324,608,605,609,618,623,622],"class_list":["post-1140","post","type-post","status-publish","format-standard","hentry","category-development","tag-cloning","tag-dom","tag-dragula","tag-elements","tag-issue","tag-javascript","tag-jquery","tag-mouse","tag-mousemove","tag-move","tag-moving","tag-offset","tag-position"],"_links":{"self":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/1140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/comments?post=1140"}],"version-history":[{"count":1,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/1140\/revisions"}],"predecessor-version":[{"id":1143,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/1140\/revisions\/1143"}],"wp:attachment":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/media?parent=1140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/categories?post=1140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/tags?post=1140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}