{"id":3630,"date":"2022-10-28T11:37:47","date_gmt":"2022-10-28T08:37:47","guid":{"rendered":"https:\/\/jenniina.fi\/?p=3630"},"modified":"2023-03-27T10:24:23","modified_gmt":"2023-03-27T07:24:23","slug":"draggable-blobs","status":"publish","type":"post","link":"https:\/\/jenniina.fi\/finnish\/draggable-blobs\/","title":{"rendered":"Accessible Draggable Blobs #1 &#038; #2"},"content":{"rendered":"<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\"><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Etusivu<\/span><\/p><\/nav>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:80%\">\n<h1 class=\"has-text-align-center wp-block-heading\" id=\"blobs\">Accessible Draggable Blobs<\/h1>\n\n\n\n<p class=\"has-text-align-center\">Made with TypeScript.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"align-horizontal-wrap alignright size-thumbnail\"><img decoding=\"async\" width=\"480\" height=\"270\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart-480x270.jpg\" alt=\"blob art made with the draggable blob game\" class=\"wp-image-3728 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart-480x270.jpg 480w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart-640x360.jpg 640w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart-1400x787.jpg 1400w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart-768x432.jpg 768w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart-18x10.jpg 18w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/blobart.jpg 1474w\" data-sizes=\"(max-width: 480px) 100vw, 480px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 480px; --smush-placeholder-aspect-ratio: 480\/270;\" \/><figcaption class=\"wp-element-caption\">Art made with the original draggable app.<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Modelled after <a title=\"\" href=\"https:\/\/codingartistweb.com\/2022\/08\/draggable-div-with-javascript\/\" rel=\"nofollow noopener\">this tutorial<\/a>, because of the way it handled both mouse and touch events, and inspired by <a title=\"\" href=\"https:\/\/www.youtube.com\/watch?v=SN2k-fUKKos\" rel=\"nofollow noopener\">this video<\/a> for the original&#8217;s look. I converted the scripts to typescript and edited them to allow for multiple draggable items, keyboard access and color changing option, as well as deleting and adding blobs, and additionally set the positions to localStorage memory so the blobs don&#8217;t reset every time the page is refreshed.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/jenniina.fi\/finnish\/category\/web-design\/javascript\/\" data-type=\"category\" data-id=\"9\">See more JavaScript content<\/a><\/p>\n\n\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">The Controls<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Mouse use<\/h3>\n\n\n\n<p>Click and drag to move the blobs around.<\/p>\n\n\n\n<p>Change their color by dragging them to one of the color blocks on the right-hand side.<\/p>\n\n\n\n<p>Change the size of the blob in focus by scrolling with the mouse wheel or by dragging them to either the &#8220;L&#8221; or &#8220;S&#8221;-symbols on the left. <\/p>\n\n\n\n<p>Make a duplicate of a blob by dragging it to the plus-symbol on the top-left. <\/p>\n\n\n\n<p>Delete a blob by dragging it to the bottom-left minus-symbol. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keyboard use<\/h3>\n\n\n\n<p>Use arrow keys to move blobs when focused. <\/p>\n\n\n\n<p>Change color by pressing Enter.<\/p>\n\n\n\n<p>Press 0 (zero) to place the blob that is in focus behind the others.<\/p>\n\n\n\n<p>Press 1 to make the blob smaller and 2 to make it larger.<\/p>\n\n\n\n<p>Press 3 or + (plus) to clone a blob and Delete or &#8211; (minus) to remove a blob.<\/p>\n\n\n\n<p>Press the Esc key to exit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The New Version of the Draggable Blobs <\/h2>\n\n\n\n<p>Made a more visually appealing version using feColorMatrix values instead of simply contrast and blur, also adding the option to modify the background lightness and saturation. <\/p>\n\n\n\n<section id=\"drag-container0\" class=\"drag-container\"><\/section>\n<svg class=\"filter\">\n<filter id=\"filter\">\n<fegaussianblur in=\"SourceGraphic\" stddeviation=\"10\"><\/fegaussianblur>\n<fecolormatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 00 0 0 20 -10 \"><\/fecolormatrix>\n<\/filter>\n<\/svg>\n\n\n\n<h2 class=\"wp-block-heading\">The Original<\/h2>\n\n\n\n<section id=\"drag-container1\" class=\"drag-container\"><\/section>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>See also my accessible <a href=\"https:\/\/jenniina.fi\/finnish\/pong\/\" data-type=\"post\" data-id=\"4243\">pong javascript game<\/a> ja <a href=\"https:\/\/jenniina.fi\/finnish\/dogs\/\" data-type=\"post\" data-id=\"2036\">random dog generator<\/a>. <\/p>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\nInteractive accessible draggable blobs made with TypeScript.\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/jenniina.fi\/finnish\/draggable-blobs\/\" class=\"link-more\" aria-label=\"Continue reading Accessible Draggable Blobs #1 &#038; #2\">More &raquo;<\/a><\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6,9],"tags":[],"class_list":["post-3630","post","type-post","status-publish","format-standard","hentry","category-web-design","category-javascript","entry","entry-type-post"],"_links":{"self":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/3630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/comments?post=3630"}],"version-history":[{"count":40,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/3630\/revisions"}],"predecessor-version":[{"id":5217,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/3630\/revisions\/5217"}],"wp:attachment":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media?parent=3630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/categories?post=3630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/tags?post=3630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}