{"id":4305,"date":"2016-06-30T22:19:31","date_gmt":"2016-06-30T13:19:31","guid":{"rendered":"http:\/\/inter-arteq.com\/?p=4305"},"modified":"2022-03-14T23:17:45","modified_gmt":"2022-03-14T14:17:45","slug":"how-to-create-dom-interaction-on-web-with-interact-js","status":"publish","type":"post","link":"http:\/\/cms.inter-arteq.com\/how-to-create-dom-interaction-on-web-with-interact-js\/","title":{"rendered":"Interact.js\u3092\u4f7f\u3063\u3066\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u8981\u7d20\u306e\u79fb\u52d5\u3084\u56de\u8ee2\u3092\u4f5c\u308b\u65b9\u6cd5"},"content":{"rendered":"\n<p>\u30e6\u30fc\u30b6\u306e\u624b\u306b\u3088\u3063\u3066<code>&lt;div&gt;<\/code>\u30bf\u30b0\u306e\u5927\u304d\u3055\u3084\u4f4d\u7f6e\u3092\u3001\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u79fb\u52d5\u3084\u62e1\u5927\u3055\u305b\u305f\u3044\u3068\u304d\u3001\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308bInteract.js\u306e\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\u3061\u3083\u3093\u3068\u30b9\u30de\u30db\u3067\u3082\u52d5\u4f5c\u78ba\u8a8d\u3067\u304d\u305f\u306e\u3067\u3053\u306e\u3088\u3046\u306aUI\u304c\u5fc5\u8981\u306a\u3068\u304d\u3001\u5fc5\u8981\u306a\u4f7f\u3044\u52dd\u624b\u304c\u3044\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p><a href=\"http:\/\/interactjs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/interactjs.io\/<\/a><\/p>\n\n\n\n<p>Document: <a href=\"http:\/\/interactjs.io\/docs\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/interactjs.io\/docs\/<\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\">\u76ee\u6b21<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/cms.inter-arteq.com\/how-to-create-dom-interaction-on-web-with-interact-js\/#%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95\" title=\"\u5b9f\u88c5\u65b9\u6cd5\">\u5b9f\u88c5\u65b9\u6cd5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/cms.inter-arteq.com\/how-to-create-dom-interaction-on-web-with-interact-js\/#%E8%A7%A3%E8%AA%AC\" title=\"\u89e3\u8aac\">\u89e3\u8aac<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/cms.inter-arteq.com\/how-to-create-dom-interaction-on-web-with-interact-js\/#%E3%81%BE%E3%81%A8%E3%82%81\" title=\"\u307e\u3068\u3081\">\u307e\u3068\u3081<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95\"><\/span>\u5b9f\u88c5\u65b9\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u306f\u3001p\u3092\u79fb\u52d5\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u8a73\u3057\u3044\u89e3\u8aac\u306f\u5f8c\u306b\u56de\u3059\u3068\u3057\u3066\u3001\u4e00\u65e6\u3001\u30b3\u30fc\u30c9\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-file=\"sample.html\" data-lang=\"HTML\"><code>&lt;p class=&quot;draggable&quot;&gt;&lt;\/p&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-file=\"script.js\" data-lang=\"JavaScript\"><code>interact(&#39;.draggable&#39;)\n  .draggable({\n    \/\/ \u6163\u6027\u3042\u308a\u306e\u3068\u304dtrue, \u6163\u6027\u306a\u3057\u306e\u3068\u304dfalse\n    inertia: true,\n    \/\/ \u7bc4\u56f2\u3092\u5236\u9650\u3059\u308b\u3068\u304d\u306b\u6307\u5b9a\n    restrict: {\n      restriction: &quot;parent&quot;, \/\/ \u89aa\u8981\u7d20\u3092\u7bc4\u56f2\u306b\u6307\u5b9a\n      endOnly: true, \/\/ true\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u3001\u30c9\u30ed\u30c3\u30d7\u3057\u305f\u77ac\u9593\u306b\u7bc4\u56f2\u3092\u8d85\u3048\u3066\u3044\u308b\u3068\u304d\u3001\u7bc4\u56f2\u5185\u306b\u623b\u3059\n      elementRect: { top: 0, left: 0, bottom: 1, right: 1 } \/\/ \u666e\u901a\u306f\u3053\u306e\u8a2d\u5b9a\u3067\u3044\u3044\u3002\u8a73\u7d30\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3002\n    },\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u304c\u5fc5\u8981\u306a\u7bc4\u56f2\u306b\u30c9\u30e9\u30c3\u30b0\u3057\u305f\u3068\u304d\u3001\u81ea\u52d5\u7684\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\n    autoScroll: true,\n    \/\/ call this function on every dragmove event\n    onmove: function(event){\n      \/\/ drag\u3055\u308c\u3066\u3044\u308b\u8981\u7d20\n      var target = event.target;\n      \/\/ data\u5c5e\u6027\u304b\u3089\u4eca\u306e\u4f4d\u7f6e\u3092\u53d6\u5f97\u3057\u3066\u3001\u79fb\u52d5\u5206\u3092\u8db3\u3059\n      var x = (parseFloat(target.getAttribute(&#39;data-x&#39;)) || 0) + event.dx;\n      var y = (parseFloat(target.getAttribute(&#39;data-y&#39;)) || 0) + event.dy;\n      \/\/ \u4f4d\u7f6e\u3092\u5909\u66f4\n      target.style.webkitTransform =\n      target.style.transform =\n        &#39;translate(&#39; + x + &#39;px, &#39; + y + &#39;px)&#39;;\n      \/\/ \u4f4d\u7f6e\u3092data\u5c5e\u6027\u306b\u4fdd\u6301\n      target.setAttribute(&#39;data-x&#39;, x);\n      target.setAttribute(&#39;data-y&#39;, y);\n    },\n    \/\/ call this function on every dragend event\n    onend: function (event) {\n\u3000\u3000\u3000\/\/ \u7d42\u4e86\u3057\u305f\u3068\u304d\u306e\u51e6\u7406\n    }\n  });<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%A7%A3%E8%AA%AC\"><\/span>\u89e3\u8aac<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u5404\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u898b\u308c\u3070\u5206\u304b\u308a\u3084\u3059\u304f\u66f8\u3044\u3066\u3042\u308b\u306e\u3067\u3001\u30b3\u30e1\u30f3\u30c8\u3092\u53c2\u8003\u306b\u898b\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>interact.js\u306f\u30a4\u30d9\u30f3\u30c8\u3092\u53d6\u5f97\u3057\u3066\u304f\u308c\u308b\u3060\u3051\u3067\u3001\u5b9f\u969b\u306b\u79fb\u52d5\u3059\u308b\u30b3\u30fc\u30c9\u306f<code>onmove<\/code>\u3084<code>onend<\/code>\u3067\u81ea\u5206\u3067\u66f8\u304b\u306a\u304f\u3066\u306f\u3044\u3051\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u4f8b\u3048\u3070\u3001\u79fb\u52d5\u306e\u5834\u5408\u306f\u30de\u30a6\u30b9\u304c\u52d5\u3044\u305f\u6642\u3001\u79fb\u52d5\u3057\u305f\u5206\u3060\u3051\u3001CSS\u306e<code>translate<\/code>\u306e\u5024\u3092\u5909\u66f4\u3057\u3066\u3001\u79fb\u52d5\u3057\u3066\u3044\u308b\u3088\u3046\u306b\u898b\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3082\u3057\u3001\u56de\u8ee2\u3084\u62e1\u5927\u30fb\u7e2e\u5c0f\u3057\u305f\u3044\u5834\u5408\u3082\u540c\u69d8\u306b<code>rotate<\/code>\u3084<code>scale<\/code>\u3092\u64cd\u4f5c\u3057\u3066\u8868\u73fe\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%81%BE%E3%81%A8%E3%82%81\"><\/span>\u307e\u3068\u3081<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u81ea\u5206\u3067\u5b9f\u969b\u306e\u51e6\u7406\u3092\u66f8\u304b\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u306e\u306f\u3001\u9762\u5012\u306a\u4e00\u65b9\u3067\u3001\u51e6\u7406\u306e\u5185\u5bb9\u3092\u304b\u306a\u308a\u81ea\u7531\u5ea6\u9ad8\u304f\u4f5c\u308c\u308b\u306e\u3067\u3001\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u308b\u3068\u9762\u767d\u3044\u3053\u3068\u304c\u3044\u308d\u3044\u308d\u3067\u304d\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30e6\u30fc\u30b6\u306e\u624b\u306b\u3088\u3063\u3066&lt;div&gt;\u30bf\u30b0\u306e\u5927\u304d\u3055\u3084\u4f4d\u7f6e\u3092\u3001\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u79fb\u52d5\u3084\u62e1\u5927\u3055\u305b\u305f\u3044\u3068\u304d\u3001\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308bInteract.js\u306e\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\u3061\u3083\u3093\u3068\u30b9\u30de\u30db\u3067\u3082\u52d5\u4f5c\u78ba\u8a8d\u3067\u304d\u305f\u306e\u3067\u3053\u306e\u3088\u3046\u306aUI\u304c\u5fc5\u8981\u306a\u3068\u304d\u3001\u5fc5\u8981 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":208501,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[41,5],"tags":[166,43,165,167],"class_list":["post-4305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-program","tag-interactjs","tag-javascript","tag-js-library","tag-ui"],"aioseo_notices":[],"jetpack_featured_media_url":"http:\/\/cms.inter-arteq.com\/wp-content\/uploads\/2022\/03\/how-to-create-dom-interaction-on-web-with-interact-js.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts\/4305"}],"collection":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/comments?post=4305"}],"version-history":[{"count":4,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts\/4305\/revisions"}],"predecessor-version":[{"id":208502,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts\/4305\/revisions\/208502"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/media\/208501"}],"wp:attachment":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/media?parent=4305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/categories?post=4305"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/tags?post=4305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}