{"id":652,"date":"2020-08-26T11:11:08","date_gmt":"2020-08-26T11:11:08","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=652"},"modified":"2020-10-05T12:13:57","modified_gmt":"2020-10-05T12:13:57","slug":"drag-hiccups","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/drag-hiccups\/","title":{"rendered":"Drag hiccups"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Problem<\/strong>: Using a Wacom Intuos tablet on Windows 10, <a href=\"https:\/\/greensock.com\/draggable\">GSAP&#8217;s Draggable<\/a> doesn&#8217;t pick up the dragged element correctly, or doesn&#8217;t drop it when you end the drag.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Solution<\/strong>: Open Wacom Tablet Properties. Make sure you have checked <em>Use Windows Ink<\/em> on the <em>Mapping<\/em> tab. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"708\" height=\"735\" src=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/wacom-windows-ink.png\" alt=\"\" class=\"wp-image-653\" srcset=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/wacom-windows-ink.png 708w, https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/wacom-windows-ink-289x300.png 289w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next open Pen &amp; Windows Ink settings and check <em>Allow my pen to act as mouse in legacy applications.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"800\" src=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/ink-pen-als-muis.png\" alt=\"\" class=\"wp-image-654\" srcset=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/ink-pen-als-muis.png 1023w, https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/ink-pen-als-muis-300x235.png 300w, https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/08\/ink-pen-als-muis-768x601.png 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Discussion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The solution seems counterintuitive. What is the role of Windows Ink? Is a browser a legacy application? I just found this solution by trial and error.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also GreenSocks Draggable plug-in also plays a part: Alternatives as <a href=\"https:\/\/interactjs.io\/\">interactjs<\/a> or <a href=\"https:\/\/github.com\/Bernardo-Castilho\/dragdroptouch\">dragdroptouch<\/a> do not require these weird settings. Neither does <a href=\"https:\/\/jqueryui.com\/draggable\/\">jQuery&#8217;s Draggable<\/a>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For completeness, let&#8217;s also mention <a href=\"https:\/\/github.com\/d3\/d3-drag\">d3-drag<\/a>. It&#8217;s also immune to Wacom or Ink settings. I replaced d3-drag in an earlier project (by interactjs) since Vue.js and D3 are hard to combine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I met this problem working on<em> <\/em>the<em> <\/em><a href=\"https:\/\/potatodie.nl\/lab\/bishops-and-rooks\/\"><em>Bishops and Rooks<\/em> game<\/a>. I replaced interactjs with GreenSock because interactjs didn&#8217;t work well on all (mobile) Safari versions I tested. Also GreenSock makes working with SVG easier.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GreenSock topic<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hopefully I&#8217;m the only one experiencing these troubles. So far so good, according to the <a href=\"https:\/\/greensock.com\/forums\/topic\/25303-draggable-problems-wacom-windows-10\">GreenSock forum<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Workaround of a rare bug I found with gsap&#8217;s Draggable and Wacom Intuos tablets on Windows 10<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[38,25],"class_list":["post-652","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-greensock","tag-windows-10"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":3,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":813,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/652\/revisions\/813"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}