{"id":484766,"date":"2026-06-23T18:23:02","date_gmt":"2026-06-23T18:23:02","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=484766"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=484766","title":{"rendered":"\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u044f\u00a0\u0432\u00a01\u0421:\u00a0\u0441\u043a\u043b\u0430\u0434\u00a0\u0441\u0442\u0430\u043b\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435,\u00a0\u0447\u0435\u043c\u00a0\u0432\u0430\u0448\u00a0\u0441\u0435\u0440\u0438\u0430\u043b\u00bb"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0427\u0442\u043e,\u00a0\u0435\u0441\u043b\u0438\u00a0\u043c\u044b\u00a0\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c\u00a0\u0442\u0430\u043a\u043e\u0439\u00a0\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u00a0\u0432\u00a01\u0421,\u00a0\u0447\u0442\u043e\u0431\u044b\u00a0\u043e\u043d\u00a0\u0431\u044b\u043b\u00a0\u0443\u0434\u043e\u0431\u043d\u0435\u0435,\u00a0\u0447\u0435\u043c\u00a0\u0432\u00a0Excel?\u00a0\u0414\u0430\u00a0\u043d\u0435\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u00a0\u0443\u0434\u043e\u0431\u043d\u0435\u0435\u00a0\u2014 \u0430\u00a0\u0447\u0442\u043e\u0431\u044b\u00a0\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438\u00a0\u0441\u043a\u0430\u0437\u0430\u043b\u0438:\u00a0<em>\u00ab\u041e\u0433\u043e,\u00a0\u044d\u0442\u043e\u00a0\u0436\u0435\u00a0\u043a\u0430\u043a\u00a0\u0438\u0433\u0440\u0430!\u00bb \u0421 \u0432\u0430\u043c\u0438 \u0441\u043d\u043e\u0432\u0430 \u0412\u0435\u0434\u0443\u0449\u0438\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442 \u043c\u043e\u0434\u0443\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 1\u0421 \u041c\u0438\u0445\u0435\u0435\u0432 \u0410\u043d\u0442\u043e\u043d. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u0443 <s>\u0438\u0433\u0440\u0443<\/s> \u0438\u0434\u0435\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e<\/em><\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435,\u00a0\u0447\u0442\u043e\u00a0Excel\u00a0\u2014 \u044d\u0442\u043e\u00a0\u0441\u043a\u043b\u0430\u0434,\u00a0\u0432\u0438\u0434\u00a0\u0441\u0432\u0435\u0440\u0445\u0443.\u00a0\u0421\u0438\u043d\u0438\u0435\u00a0\u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u2014 \u0441\u0442\u0435\u043b\u043b\u0430\u0436\u0438,\u00a0\u0432\u00a0\u043d\u0438\u0445\u00a0\u043b\u0435\u0436\u0430\u0442\u00a0\u0442\u043e\u0432\u0430\u0440\u044b.\u00a0\u0414\u0430,\u00a0\u043d\u0430\u00a0\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u00a0\u0441\u043a\u043b\u0430\u0434\u043e\u0432\u00a0\u0442\u043e\u043f\u043e\u043b\u043e\u0433\u0438\u044f\u00a0\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430\u00a0\u0438\u043c\u0435\u043d\u043d\u043e\u00a0\u0432\u00a0Excel.\u00a0\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u00a0\u0442\u0430\u043a\u00a0\u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435\u00a0\u0438\u00a0\u0443\u0434\u043e\u0431\u043d\u0435\u0435:\u00a0\u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\u00a0\u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u0432\u00a0\u0442\u0430\u0431\u043b\u0438\u0446\u0435\u00a0\u043a\u0443\u0434\u0430\u00a0\u043f\u0440\u043e\u0449\u0435,\u00a0\u0447\u0435\u043c\u00a0\u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f,\u00a0\u043a\u0430\u043a\u00a0\u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u00a0\u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0438\u00a0\u0441\u00a0\u043a\u0443\u0447\u0435\u0439\u00a0\u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0445\u00a0\u0446\u0438\u0444\u0440\u00a0\u0432\u00a01\u0421.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1c3\/c5c\/da7\/1c3c5cda7dbed52a2264972fea97214c.png\" width=\"900\" height=\"213\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/1c3\/c5c\/da7\/1c3c5cda7dbed52a2264972fea97214c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1c3\/c5c\/da7\/1c3c5cda7dbed52a2264972fea97214c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p><strong>\u0417\u0430\u0434\u0430\u0447\u043a\u0430:<\/strong>\u00a0\u043d\u0430\u00a0\u0441\u0442\u0435\u043b\u043b\u0430\u0436\u0435\u00a0\u0442\u0440\u0438\u00a0\u043f\u043e\u043b\u043a\u0438.\u00a0\u041d\u0430\u00a0\u043f\u0435\u0440\u0432\u043e\u0439\u00a0\u2014 \u043a\u043e\u043d\u0444\u0435\u0442\u044b,\u00a0\u043d\u0430\u00a0\u0432\u0442\u043e\u0440\u043e\u0439\u00a0\u2014 \u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0438,\u00a0\u043d\u0430\u00a0\u0442\u0440\u0435\u0442\u044c\u0435\u0439\u00a0\u2014 \u0441\u0438\u0440\u043e\u043f\u044b.\u00a0 \u041a\u0430\u043a\u00a0\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e\u00a0\u043f\u043e\u043d\u044f\u0442\u044c,\u00a0\u0447\u0442\u043e\u00a0\u043d\u0443\u0436\u043d\u043e\u00a0\u0432\u0437\u044f\u0442\u044c\u00a0\u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0443\u00a0\u0441\u043e\u00a0\u0432\u0442\u043e\u0440\u043e\u0439\u00a0\u043f\u043e\u043b\u043a\u0438?<\/p>\n<p>\u041e\u0442\u0432\u0435\u0442:\u00a0\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u00a0\u0432\u0441\u044e\u00a0\u044d\u0442\u0443\u00a0\u043a\u0440\u0430\u0441\u043e\u0442\u0443\u00a0\u0432\u00a0\u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0438!\u00a0\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u044f\u00a0\u2014 \u044d\u0442\u043e\u00a0\u0441\u0442\u0430\u0440\u0430\u044f\u00a0\u0434\u043e\u0431\u0440\u0430\u044f\u00a0\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f,\u00a0\u043a\u043e\u0442\u043e\u0440\u0430\u044f:<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u043d\u0435\u00a0\u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u00a0(\u0432\u00a0\u043e\u0442\u043b\u0438\u0447\u0438\u0435\u00a0\u043e\u0442\u00a03D,\u00a0\u0433\u0434\u0435\u00a0\u0432\u0430\u0448\u00a0\u041f\u041a\u00a0\u043c\u043e\u0436\u0435\u0442\u00a0\u043d\u0430\u0447\u0430\u0442\u044c\u00a0\u043c\u0435\u0447\u0442\u0430\u0442\u044c\u00a0\u043e\u00a0\u043f\u0435\u043d\u0441\u0438\u0438);<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442\u00a0\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u00a0\u043f\u0440\u0435\u0434\u043c\u0435\u0442\u00a0\u043f\u043e\u0434\u00a0\u0443\u0433\u043b\u043e\u043c\u00a0\u0432\u00a030\u2218;<\/p>\n<p>\u0434\u0430\u0451\u0442\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u00a0\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u00a0\u0443\u0433\u043b\u044b\u00a0\u043e\u0431\u0437\u043e\u0440\u0430\u00a0(\u043d\u0443,\u00a0\u0438\u043b\u0438\u00a0\u0445\u043e\u0442\u044f\u00a0\u0431\u044b\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0\u0447\u0435\u0442\u044b\u0440\u0435\u00a0\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445\u00a0\u0432\u0438\u0434\u0430\u00a0\u2014 \u044d\u0442\u043e\u0433\u043e\u00a0\u0445\u0432\u0430\u0442\u0438\u0442).<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/37e\/9cc\/56e\/37e9cc56eb57bbe98e46bfb5405350f3.png\" width=\"974\" height=\"556\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/37e\/9cc\/56e\/37e9cc56eb57bbe98e46bfb5405350f3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/37e\/9cc\/56e\/37e9cc56eb57bbe98e46bfb5405350f3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p><strong>\u041a\u0430\u043a\u00a0\u044d\u0442\u043e\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0\u0432\u00a01\u0421?<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c\u00a0\u043d\u0430\u043c\u00a0\u043f\u043e\u043c\u043e\u0436\u0435\u0442\u00a0\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\u00a0\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u00a0HTML\u00a0\u0432\u043d\u0443\u0442\u0440\u0438\u00a01\u0421.\u00a0\u0415\u0441\u043b\u0438\u00a0\u0432\u044b\u00a0\u043d\u0435\u00a0\u0437\u043d\u0430\u043b\u0438,\u00a0\u0442\u043e\u00a01\u0421\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u00a0\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443\u00a0WebKit,\u00a0\u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u0443\u044e\u00a0\u0443\u00a0\u0430\u0439\u0444\u043e\u043d\u043e\u0432\u00a0(\u043b\u0443\u0447\u0448\u0438\u0435\u00a0\u043c\u0438\u0440\u043e\u0432\u044b\u0435\u00a0\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438,\u00a0\u0434\u0430).<\/p>\n<p><strong>\u0428\u0430\u0433\u00a01.<\/strong>\u00a0\u0421\u043e\u0437\u0434\u0430\u0451\u043c\u00a0\u0432\u043d\u0435\u0448\u043d\u044e\u044e\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443\u00a0\u0438\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u0432\u00a0\u043d\u0435\u0451\u00a0\u041f\u043e\u043b\u0435HTML\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6f2\/56a\/e80\/6f256ae80a6bb0b24e81a0a470c69b52.png\" alt=\"\" title=\"\" width=\"974\" height=\"175\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/6f2\/56a\/e80\/6f256ae80a6bb0b24e81a0a470c69b52.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6f2\/56a\/e80\/6f256ae80a6bb0b24e81a0a470c69b52.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p><strong>\u0428\u0430\u0433\u00a02.<\/strong>\u00a0\u0421\u043e\u0437\u0434\u0430\u0451\u043c\u00a0\u0442\u0440\u0438\u00a0\u043c\u0430\u043a\u0435\u0442\u0430:\u00a0HTML,\u00a0JS\u00a0\u0438\u00a0CSS.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c2f\/1e2\/b1f\/c2f1e2b1f0fc0774cda69b1f7b438361.png\" width=\"700\" height=\"297\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c2f\/1e2\/b1f\/c2f1e2b1f0fc0774cda69b1f7b438361.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c2f\/1e2\/b1f\/c2f1e2b1f0fc0774cda69b1f7b438361.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>\u041c\u0430\u043a\u0435\u0442\u00a0HTML<\/strong>\u00a0\u2014 \u044d\u0442\u043e\u00a0\u043a\u0430\u0440\u043a\u0430\u0441\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u043a\u043e\u0434:<\/p>\n<p><code>html<\/code><\/p>\n<p><code>&lt;!DOCTYPE html&gt;<\/code><\/p>\n<p><code>&lt;HTML&gt;<\/code><\/p>\n<p><code>&lt;HEAD&gt;@CSS&lt;\/HEAD&gt;<\/code><\/p>\n<p><code>&lt;BODY&gt;<\/code><\/p>\n<p><code>&lt;h1&gt;\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0435\u0442\u043a\u0430 10 \u00d7 10 \u0441 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438&lt;\/h1&gt;<\/code><\/p>\n<p><code>&lt;div id='grid-container'&gt;&lt;\/div&gt;<\/code><\/p>\n<p><code>@JS<\/code><\/p>\n<p><code>&lt;\/BODY&gt;<\/code><\/p>\n<p><code>&lt;\/HTML&gt;<\/code><\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>\u041c\u0430\u043a\u0435\u0442\u00a0JS<\/strong>\u00a0\u2014 \u044d\u0442\u043e\u00a0\u043b\u043e\u0433\u0438\u043a\u0430.\u00a0\u0417\u0434\u0435\u0441\u044c\u00a0\u043c\u044b:<\/p>\n<p>o\u00a0\u00a0\u00a0 \u0441\u043e\u0437\u0434\u0430\u0451\u043c\u00a0\u0441\u0435\u0442\u043a\u0443\u00a0\u0438\u0437\u00a0\u044f\u0447\u0435\u0435\u043a;<\/p>\n<p>o\u00a0\u00a0\u00a0 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u044b\u00a0(\u043a\u043e\u043d\u0444\u0435\u0442\u044b,\u00a0\u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0438,\u00a0\u0441\u0438\u0440\u043e\u043f\u044b);<\/p>\n<p>o\u00a0\u00a0\u00a0 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u00a0\u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c\u00a0\u0438\u0445\u00a0\u043c\u044b\u0448\u043a\u043e\u0439\u00a0(drag\u00a0&amp; drop);<\/p>\n<p>o\u00a0\u00a0\u00a0 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u043c\u00a0\u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u043f\u0440\u0438\u00a0\u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438;<\/p>\n<p>o\u00a0\u00a0\u00a0 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c,\u00a0\u0437\u0430\u043d\u044f\u0442\u0430\u00a0\u043b\u0438\u00a0\u044f\u0447\u0435\u0439\u043a\u0430,\u00a0\u043f\u0440\u0435\u0436\u0434\u0435\u00a0\u0447\u0435\u043c\u00a0\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c\u00a0\u0442\u0443\u0434\u0430\u00a0\u043d\u043e\u0432\u044b\u0439\u00a0\u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dc1\/afe\/079\/dc1afe07983b8b826282f81c5f5a648b.png\" width=\"624\" height=\"486\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/dc1\/afe\/079\/dc1afe07983b8b826282f81c5f5a648b.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dc1\/afe\/079\/dc1afe07983b8b826282f81c5f5a648b.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p><strong><br \/>      <\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434\u0430 \u0432 \u043c\u0430\u043a\u0435\u0442:<br \/>      window.onload = function() {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 const      gridContainer = document.getElementById(&#8216;grid-container&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 const occupiedCells = new Set(); \/\/ \u0425\u0440\u0430\u043d\u0438\u0442 \u0437\u0430\u043d\u044f\u0442\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      const containers = [@Containers];<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0435\u0442\u043a\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      for (let i = 0; i &lt; 10; i++) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      for (let j = 0; j &lt; 10; j++) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const cell =      document.createElement(&#8216;div&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.className = &#8216;cell&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.left = <\/strong><code><strong>${j *      90}px<\/strong><\/code><strong>;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/cell.style.top\"><strong>cell.style.top<\/strong><\/a><strong> = <\/strong><code><strong>${i *      50}px<\/strong><\/code><strong>;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.dataset.row = i;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.dataset.col = j;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b x \u0438 y \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u044f\u0447\u0435\u0439\u043a\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.setAttribute(&#8216;data-x&#8217;, i);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.setAttribute(&#8216;data-y&#8217;,      j);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 gridContainer.appendChild(cell);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u0420\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      containers.forEach(container =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const item =      document.createElement(&#8216;div&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.className = &#8216;draggable-item&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.textContent = container.text;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.draggable = true;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/item.style\"><strong>item.style<\/strong><\/a><strong>.backgroundColor =      container.color;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/item.style\"><strong>item.style<\/strong><\/a><strong>.zIndex =      parseInt(container.x \/ container.y * 100,10); <\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const Top =      document.createElement(&#8216;div&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Top.className = &#8216;top&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Top.textContent =\u00a0      container.text;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/Top.style\"><strong>Top.style<\/strong><\/a><strong>.backgroundColor =      container.color;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const Front =      document.createElement(&#8216;div&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Front.className = &#8216;front&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/Front.style\"><strong>Front.style<\/strong><\/a><strong>.backgroundColor =      container.color;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const Right = document.createElement(&#8216;div&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Right.className = &#8216;right&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Right.textContent =\u00a0      container.text;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/Right.style\"><strong>Right.style<\/strong><\/a><strong>.backgroundColor =      container.color;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.appendChild(Top);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.appendChild(Front);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.appendChild(Right);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 draggable-item<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.setAttribute(&#8216;data-color&#8217;, container.color);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-text&#8217;,      container.text);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-x&#8217;,      container.x);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-y&#8217;,      container.y);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-z&#8217;,      container.z);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u044f\u0447\u0435\u0439\u043a\u0443 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e      \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c x \u0438 y<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      const targetCell =      document.querySelector(<\/strong><code><strong>.cell[data-row=\"${container.x}\"][data-col=\"${container.y}\"]<\/strong><\/code><strong>);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (targetCell) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      targetCell.appendChild(item);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0443 \u043a\u0430\u043a \u0437\u0430\u043d\u044f\u0442\u0443\u044e<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      occupiedCells.add(<\/strong><code><strong>${container.x},${container.y}<\/strong><\/code><strong>);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      let draggedItem = null;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      let originalCell = null;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      function handleDragStart(e) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem = this;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      originalCell = this.parentElement;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      e.dataTransfer.setData(&#8216;text\/plain&#8217;, null);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c Ghost \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var img =      document.createElement(&#171;img&#187;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 img.src = &#171;&#187;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      e.dataTransfer.setDragImage(img, 0, 0);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      document.addEventListener(&#8216;dragend&#8217;, () =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (draggedItem) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem = null;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      originalCell = null;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0435\u043a \u0441\u0435\u0442\u043a\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      document.querySelectorAll(&#8216;.cell&#8217;).forEach(cell =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u2014 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u0438      \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.addEventListener(&#8216;mouseenter&#8217;, () =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.backgroundColor = &#8216;rgba(135, 206, 235, 0.3)&#8217;; \/\/      \u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0433\u043e\u043b\u0443\u0431\u043e\u0439<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.borderColor = &#8216;blue&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.zIndex = &#8217;10&#8217;; \/\/ \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.boxShadow = &#8216;0 0 8px rgba(0, 123, 255, 0.5)&#8217;; \/\/      \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.addEventListener(&#8216;mouseleave&#8217;, () =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0432\u0438\u0434<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.backgroundColor = &#187;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.borderColor =      &#8216;#999&#8217;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.zIndex = &#187;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      <\/strong><a href=\"http:\/\/cell.style\"><strong>cell.style<\/strong><\/a><strong>.boxShadow = &#187;;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.addEventListener(&#8216;dragover&#8217;,      (e) =&gt; e.preventDefault());<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.addEventListener(&#8216;drop&#8217;, (e) =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      e.preventDefault();<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (!draggedItem) return;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const row = cell.dataset.row;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const col = cell.dataset.col;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const cellKey = <\/strong><code><strong>${row},${col}<\/strong><\/code><strong>;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0437\u0430\u043d\u044f\u0442\u0430 \u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (occupiedCells.has(cellKey)) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert(&#8216;\u042f\u0447\u0435\u0439\u043a\u0430 \u0443\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u0430!      \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044e.&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (originalCell) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const origRow =      originalCell.dataset.row;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const origCol =      originalCell.dataset.col;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 occupiedCells.delete(<\/strong><code><strong>${origRow},${origCol}<\/strong><\/code><strong>);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b draggable-item \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem.setAttribute(&#8216;data-x&#8217;, row);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem.setAttribute(&#8216;data-y&#8217;, col);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043d\u043e\u0432\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u2014 \u043e\u043d      \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u043f\u043b\u043e\u0449\u0430\u0434\u044c \u044f\u0447\u0435\u0439\u043a\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.appendChild(draggedItem);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      occupiedCells.add(cellKey);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430      \u043f\u043e\u043b\u0435<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(item      =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.addEventListener(&#8216;dragstart&#8217;,      handleDragStart);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 <\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(item =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 item.addEventListener(&#8216;mouseenter&#8217;, () =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(otherItem      =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (otherItem !== item) {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      otherItem.classList.add(&#8216;dimmed&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      item.addEventListener(&#8216;mouseleave&#8217;, () =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(otherItem      =&gt; {<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 otherItem.classList.remove(&#8216;dimmed&#8217;);<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      });<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>});<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0      \/\/ \u0417\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u044b\u0448\u0438<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0\u00a0\u00a0 document.addEventListener(&#8216;contextmenu&#8217;,      e =&gt; e.preventDefault());<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>}<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u00a0<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong><br \/> \u041c\u0430\u043a\u0435\u0442\u00a0CSS<\/strong>\u00a0\u2014 \u044d\u0442\u043e\u00a0\u0441\u0442\u0438\u043b\u044c.\u00a0\u0417\u0434\u0435\u0441\u044c\u00a0\u043c\u044b\u00a0\u0437\u0430\u0434\u0430\u0451\u043c\u00a0\u0446\u0432\u0435\u0442\u0430,\u00a0\u0440\u0430\u0437\u043c\u0435\u0440\u044b,\u00a0\u0442\u0435\u043d\u0438,\u00a0\u0443\u0433\u043b\u044b\u00a0\u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430\u00a0\u0438\u00a0\u043f\u0440\u043e\u0447\u0438\u0435\u00a0\u043a\u0440\u0430\u0441\u043e\u0442\u044b.\u00a0\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u044f\u00a0\u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f\u00a0\u0447\u0435\u0440\u0435\u0437\u00a0transform: rotate(-30deg) skewX(30deg)\u00a0\u2014 \u043c\u0430\u0433\u0438\u044f,\u00a0\u0430\u00a0\u043d\u0435\u00a0\u043a\u043e\u0434!<\/p>\n<p><strong>\u041a\u043e\u0434\u00a0\u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u0435:\u00a0\u043c\u0430\u0433\u0438\u044f\u00a0\u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>\u0412\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435\u00a0<strong>\u041f\u0440\u0438\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0438\u041d\u0430\u0421\u0435\u0440\u0432\u0435\u0440\u0435<\/strong>\u00a0\u043f\u0438\u0448\u0435\u043c\u00a0\u043a\u043e\u0434,\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0439:<\/p>\n<p>1.\u00a0\u00a0\u00a0 \u0411\u0435\u0440\u0451\u0442\u00a0\u043c\u0430\u043a\u0435\u0442\u044b\u00a0HTML,\u00a0JS\u00a0\u0438\u00a0CSS.<\/p>\n<p>2.\u00a0\u00a0\u00a0 \u041f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u00a0CSS\u00a0\u0438\u00a0JS\u00a0\u0432\u00a0HTML\u00a0(\u0447\u0435\u0440\u0435\u0437\u00a0@CSS\u00a0\u0438\u00a0@JS).<\/p>\n<p>3.\u00a0\u00a0\u00a0 \u0414\u0435\u043b\u0430\u0435\u0442\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u00a0\u043a\u00a0\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0443\u00a0\u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u044f,\u00a0\u0447\u0442\u043e\u0431\u044b\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u00a0\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b\u00a0\u044f\u0447\u0435\u0435\u043a\u00a0\u0438\u00a0\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\u00a0\u043e\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445.<\/p>\n<p>4.\u00a0\u00a0\u00a0 \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432\u00a0\u0441\u00a0\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438\u00a0(\u0446\u0432\u0435\u0442,\u00a0\u0442\u0435\u043a\u0441\u0442,\u00a0\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b).<\/p>\n<p>5.\u00a0\u00a0\u00a0 \u041f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u00a0\u044d\u0442\u043e\u0442\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u00a0\u0432\u00a0HTML\u00a0(\u0432\u043c\u0435\u0441\u0442\u043e\u00a0@Containers).<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u041f\u0440\u0438\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0438\u041d\u0430\u0421\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n<p><code>bsl<\/code><\/p>\n<p><code>\u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 = \u0420\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u0424\u043e\u0440\u043c\u044b\u0412\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435(\"\u041e\u0431\u044a\u0435\u043a\u0442\");<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML = \u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u041c\u0430\u043a\u0435\u0442(\"\u041c\u0430\u043a\u0435\u0442HTML\").\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0422\u0435\u043a\u0441\u0442();<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 JS = \"&lt;script&gt;\" + \u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u041c\u0430\u043a\u0435\u0442(\"\u041c\u0430\u043a\u0435\u0442JS\").\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0422\u0435\u043a\u0441\u0442() + \"&lt;\/script&gt;\";<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CSS = \"&lt;style&gt;\" + \u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u041c\u0430\u043a\u0435\u0442(\"\u041c\u0430\u043a\u0435\u0442CSS\").\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0422\u0435\u043a\u0441\u0442() + \"&lt;\/style&gt;\";<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML = \u0421\u0442\u0440\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c(HTML,\"@CSS\",CSS);<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML = \u0421\u0442\u0440\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c(HTML,\"@JS\",JS);\u00a0<\/code> <\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u0422\u0443\u0442 \u043f\u0438\u0448\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u043d\u0435\u0439\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<code> \u0417\u0430\u043f\u0440\u043e\u0441 = \u041d\u043e\u0432\u044b\u0439 \u0417\u0430\u043f\u0440\u043e\u0441;<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0417\u0430\u043f\u0440\u043e\u0441.\u0422\u0435\u043a\u0441\u0442 = <\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"\u0412\u042b\u0411\u0420\u0410\u0422\u042c \u0420\u0410\u0417\u041b\u0418\u0427\u041d\u042b\u0415<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u0420\u044f\u0434 \u041a\u0410\u041a X,<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u042f\u0440\u0443\u0441 \u041a\u0410\u041a Z,<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u041f\u043e\u0437\u0438\u0446\u0438\u044f \u041a\u0410\u041a Y<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u0418\u0417<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u041d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u044f.\u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a.\u041e\u0441\u0442\u0430\u0442\u043a\u0438 \u041a\u0410\u041a \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u0413\u0414\u0415<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u0420\u044f\u0434 &lt; 10<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0418 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u042f\u0440\u0443\u0441 = 1<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0418 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u041f\u043e\u0437\u0438\u0446\u0438\u044f &lt; 10<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u0423\u041f\u041e\u0420\u042f\u0414\u041e\u0427\u0418\u0422\u042c \u041f\u041e<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 X \u0412\u043e\u0437\u0440,<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Y \u0412\u041e\u0417\u0420\";<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0417\u0430\u043f\u0440\u043e\u0441\u0430 = \u0417\u0430\u043f\u0440\u043e\u0441.\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c();<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0412\u044b\u0431\u043e\u0440\u043a\u0430 = \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0417\u0430\u043f\u0440\u043e\u0441\u0430.\u0412\u044b\u0431\u0440\u0430\u0442\u044c();<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 = \"\";<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041f\u043e\u043a\u0430 \u0412\u044b\u0431\u043e\u0440\u043a\u0430.\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439() \u0426\u0438\u043a\u043b<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0422\u0435\u043a\u0421\u0442\u0440\u043e\u043a\u0430 = \u0421\u0442\u0440\u0428\u0430\u0431\u043b\u043e\u043d(\"{ color: '#00008b', text: '%1', x: %2, y: %3, z: %4 },\", \"\u041a-\"+ \u0412\u044b\u0431\u043e\u0440\u043a\u0430.X + \"-\" + \u0412\u044b\u0431\u043e\u0440\u043a\u0430.Y , \u0412\u044b\u0431\u043e\u0440\u043a\u0430.X, \u0412\u044b\u0431\u043e\u0440\u043a\u0430.Y, \u0412\u044b\u0431\u043e\u0440\u043a\u0430.Z);<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 = \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 + \u0422\u0435\u043a\u0421\u0442\u0440\u043e\u043a\u0430;<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041a\u043e\u043d\u0435\u0446\u0426\u0438\u043a\u043b\u0430;<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 = \u041b\u0435\u0432(\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0421\u0442\u0440\u0414\u043b\u0438\u043d\u0430(\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442) - 1); <\/code><\/p>\n<p><code>HTML = \u0421\u0442\u0440\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c(HTML,\"@Containers\", \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442);<\/code><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <br \/> <em>\u00a0\u00ab\u0417\u0430\u043f\u0440\u043e\u0441\u00a0\u0432\u00a01\u0421\u00a0\u2014 \u044d\u0442\u043e\u00a0\u043a\u0430\u043a\u00a0\u0437\u0430\u043a\u043b\u0438\u043d\u0430\u043d\u0438\u0435:\u00a0\u0435\u0441\u043b\u0438\u00a0\u043f\u0440\u043e\u0438\u0437\u043d\u0435\u0441\u0442\u0438\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e,\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0448\u044c\u00a0\u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0435.\u00a0\u0415\u0441\u043b\u0438\u00a0\u043d\u0435\u0442\u00a0\u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0448\u044c\u00a0\u043e\u0448\u0438\u0431\u043a\u0443\u00a0\u0438\u00a0\u0436\u0435\u043b\u0430\u043d\u0438\u0435\u00a0\u0432\u0441\u0451\u00a0\u0431\u0440\u043e\u0441\u0438\u0442\u044c\u00bb<\/em>.<\/p>\n<p><strong>\u0427\u0442\u043e\u00a0\u0432\u00a0\u0438\u0442\u043e\u0433\u0435?<\/strong><\/p>\n<p>\u041d\u0430\u00a0\u0432\u044b\u0445\u043e\u0434\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f\u00a0\u0441\u043a\u043b\u0430\u0434\u00a0\u0441\u00a0\u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439!\u00a0\u041e\u0433\u043e,\u00a0\u0441\u043a\u0430\u0436\u0435\u0442\u0435\u00a0\u0432\u044b,\u00a0\u0438\u00a0\u0431\u0443\u0434\u0435\u0442\u0435\u00a0\u043f\u0440\u0430\u0432\u044b.\u00a0\u042d\u0442\u043e\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u043e\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u00a0\u0432\u043d\u0443\u0442\u0440\u0438\u00a01\u0421\u00a0\u0438\u00a0\u043d\u0435\u00a0\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u00a0(\u0432\u00a0\u043e\u0442\u043b\u0438\u0447\u0438\u0435\u00a0\u043e\u0442\u00a03D,\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0435\u00a0\u043c\u043e\u0436\u0435\u0442\u00a0\u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c\u00a0\u0432\u0430\u0448\u00a0\u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u00a0\u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f\u00a0\u043e\u00a0\u0441\u043c\u044b\u0441\u043b\u0435\u00a0\u0436\u0438\u0437\u043d\u0438).<\/p>\n<p><strong>\u0427\u0442\u043e\u00a0\u043c\u043e\u0436\u043d\u043e\u00a0\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c:<\/strong><\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443\u00a0\u044f\u0447\u0435\u0435\u043a:\u00a0\u043a\u0440\u0430\u0441\u043d\u044b\u043c\u00a0\u2014\u00a0<em>\u00ab\u0412\u043e\u0437\u044c\u043c\u0438\u00a0\u043e\u0442\u0441\u044e\u0434\u0430\u00bb<\/em>,\u00a0\u0437\u0435\u043b\u0451\u043d\u044b\u043c\u00a0\u2014\u00a0<em>\u00ab\u041f\u043e\u0441\u0442\u0430\u0432\u044c\u00a0\u0441\u044e\u0434\u0430\u00bb<\/em>.<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e\u00a0\u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0443\u00a0\u0437\u0430\u0434\u0430\u0447\u00a0\u043d\u0430\u00a0\u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435.<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u00a0\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432\u00a0\u043f\u0440\u044f\u043c\u043e\u00a0\u043d\u0430\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445.<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0423\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f:\u00a0<em>\u00ab\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435!\u00a0\u041d\u0430\u00a0\u043f\u043e\u043b\u043a\u0435\u00a0\u0441\u00a0\u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0430\u043c\u0438\u00a0\u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c\u00a02\u00a0\u0448\u0442\u0443\u043a\u0438!\u00bb<\/em>.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f\u00a0\u0443\u0436\u0435\u00a0\u043d\u0435\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u00a01\u0421,\u00a0\u0430\u00a0\u043f\u043e\u0447\u0442\u0438\u00a0\u0438\u0433\u0440\u0430!<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4f2\/43d\/2ab\/4f243d2ab6e70eb58cff87e2f3f7b103.png\" width=\"624\" height=\"405\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/4f2\/43d\/2ab\/4f243d2ab6e70eb58cff87e2f3f7b103.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4f2\/43d\/2ab\/4f243d2ab6e70eb58cff87e2f3f7b103.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443\u00a0\u043d\u0435\u00a03D?<\/strong><\/p>\n<p>\u0412\u044b\u00a0\u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435:\u00a0\u00ab\u0410\u00a0\u043f\u043e\u0447\u0435\u043c\u0443\u00a0\u043d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a03D?\u00bb\u00a0\u041e\u0442\u0432\u0435\u0442\u00a0\u043f\u0440\u043e\u0441\u0442:<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 1\u0421\u00a0\u043d\u0435\u00a0\u0441\u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0441\u0442\u0440\u043e\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439\u00a0\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439\u00a0\u2014 \u0432\u0441\u0451\u00a0\u0431\u0443\u0434\u0435\u0442\u00a0\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c.<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f\u00a03D\u2011\u0434\u0432\u0438\u0436\u043a\u0430\u00a0\u0432\u00a01\u0421\u00a0\u043d\u0435\u00a0\u0434\u0430\u0451\u0442\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439\u00a0\u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u00a0\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u00a0\u043a\u0430\u043c\u0435\u0440\u0443\u00a0\u0442\u043e\u043b\u044c\u043a\u043e\u00a0\u0441\u0431\u0438\u0432\u0430\u0435\u0442\u00a0\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p><em>\u00a0\u00ab3D\u00a0\u0432\u00a01\u0421\u00a0\u2014 \u044d\u0442\u043e\u00a0\u043a\u0430\u043a\u00a0\u043f\u043e\u043f\u044b\u0442\u043a\u0430\u00a0\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u00a0Cyberpunk\u00a02077\u00a0\u043d\u0430\u00a0\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0435:\u00a0\u0438\u0434\u0435\u044f\u00a0\u043a\u0440\u0443\u0442\u0430\u044f,\u00a0\u043d\u043e\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u00a0\u043f\u0435\u0447\u0430\u043b\u044c\u043d\u044b\u0439\u00bb<\/em>.<\/p>\n<p><strong>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439\u00a0\u0430\u043a\u043a\u043e\u0440\u0434<\/strong><\/p>\n<p>\u0417\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c\u00a0\u0443\u0433\u043e\u043b\u00a0\u0434\u043b\u044f\u00a0\u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0438\u00a0\u0438\u00a0\u043f\u0440\u043e\u0440\u0438\u0441\u0443\u0435\u043c\u00a0\u0432\u0441\u0435\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u044b\u00a0\u043b\u0438\u0448\u044c\u00a0\u043f\u043e\u0434\u00a0\u043e\u0434\u043d\u0438\u043c\u00a0\u0443\u0433\u043b\u043e\u043c\u00a0(\u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u00a04\u00a0\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\u00a0\u043d\u0430\u00a0\u043e\u0431\u044a\u0435\u043a\u0442).\u00a0\u0418\u00a0\u0432\u043e\u0442\u00a0\u043e\u043d\u00a0\u2014 \u0432\u0435\u0441\u044c\u00a0\u0441\u043a\u043b\u0430\u0434\u00a0\u043f\u0435\u0440\u0435\u0434\u00a0\u0432\u0430\u043c\u0438,\u00a0\u0441\u00a0\u0445\u043e\u0440\u043e\u0448\u0435\u0439\u00a0\u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439,\u00a0\u0431\u0435\u0437\u00a0\u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432\u00a0\u0438\u00a0\u0431\u0435\u0437\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438\u00a0\u0438\u0437\u0443\u0447\u0430\u0442\u044c\u00a0\u043a\u0432\u0430\u043d\u0442\u043e\u0432\u0443\u044e\u00a0\u0444\u0438\u0437\u0438\u043a\u0443.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ac7\/5a6\/b85\/ac75a6b85dd15e81a9aef8b15d5a03c3.png\" width=\"974\" height=\"430\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ac7\/5a6\/b85\/ac75a6b85dd15e81a9aef8b15d5a03c3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ac7\/5a6\/b85\/ac75a6b85dd15e81a9aef8b15d5a03c3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e08\/a1a\/af9\/e08a1aaf9671a81b448dfc8ae80726d3.png\" width=\"974\" height=\"522\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e08\/a1a\/af9\/e08a1aaf9671a81b448dfc8ae80726d3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e08\/a1a\/af9\/e08a1aaf9671a81b448dfc8ae80726d3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0430\u043c \u0438\u0434\u0435\u0439\u043a\u0430? \u0423\u0434\u043e\u0431\u043d\u043e \u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0438\u0432\u043d\u043e\u0439 \u0442\u043e\u043f\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0441\u043a\u043b\u0430\u0434\u0430?\u00a0\ud83d\ude09<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1051154\/\">https:\/\/habr.com\/ru\/articles\/1051154\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0427\u0442\u043e,\u00a0\u0435\u0441\u043b\u0438\u00a0\u043c\u044b\u00a0\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c\u00a0\u0442\u0430\u043a\u043e\u0439\u00a0\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u00a0\u0432\u00a01\u0421,\u00a0\u0447\u0442\u043e\u0431\u044b\u00a0\u043e\u043d\u00a0\u0431\u044b\u043b\u00a0\u0443\u0434\u043e\u0431\u043d\u0435\u0435,\u00a0\u0447\u0435\u043c\u00a0\u0432\u00a0Excel?\u00a0\u0414\u0430\u00a0\u043d\u0435\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u00a0\u0443\u0434\u043e\u0431\u043d\u0435\u0435\u00a0\u2014 \u0430\u00a0\u0447\u0442\u043e\u0431\u044b\u00a0\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438\u00a0\u0441\u043a\u0430\u0437\u0430\u043b\u0438:\u00a0\u00ab\u041e\u0433\u043e,\u00a0\u044d\u0442\u043e\u00a0\u0436\u0435\u00a0\u043a\u0430\u043a\u00a0\u0438\u0433\u0440\u0430!\u00bb \u0421 \u0432\u0430\u043c\u0438 \u0441\u043d\u043e\u0432\u0430 \u0412\u0435\u0434\u0443\u0449\u0438\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442 \u043c\u043e\u0434\u0443\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 1\u0421 \u041c\u0438\u0445\u0435\u0435\u0432 \u0410\u043d\u0442\u043e\u043d. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u0443 \u0438\u0433\u0440\u0443 \u0438\u0434\u0435\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435,\u00a0\u0447\u0442\u043e\u00a0Excel\u00a0\u2014 \u044d\u0442\u043e\u00a0\u0441\u043a\u043b\u0430\u0434,\u00a0\u0432\u0438\u0434\u00a0\u0441\u0432\u0435\u0440\u0445\u0443.\u00a0\u0421\u0438\u043d\u0438\u0435\u00a0\u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u2014 \u0441\u0442\u0435\u043b\u043b\u0430\u0436\u0438,\u00a0\u0432\u00a0\u043d\u0438\u0445\u00a0\u043b\u0435\u0436\u0430\u0442\u00a0\u0442\u043e\u0432\u0430\u0440\u044b.\u00a0\u0414\u0430,\u00a0\u043d\u0430\u00a0\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u00a0\u0441\u043a\u043b\u0430\u0434\u043e\u0432\u00a0\u0442\u043e\u043f\u043e\u043b\u043e\u0433\u0438\u044f\u00a0\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430\u00a0\u0438\u043c\u0435\u043d\u043d\u043e\u00a0\u0432\u00a0Excel.\u00a0\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u00a0\u0442\u0430\u043a\u00a0\u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435\u00a0\u0438\u00a0\u0443\u0434\u043e\u0431\u043d\u0435\u0435:\u00a0\u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\u00a0\u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u0432\u00a0\u0442\u0430\u0431\u043b\u0438\u0446\u0435\u00a0\u043a\u0443\u0434\u0430\u00a0\u043f\u0440\u043e\u0449\u0435,\u00a0\u0447\u0435\u043c\u00a0\u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f,\u00a0\u043a\u0430\u043a\u00a0\u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u00a0\u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0438\u00a0\u0441\u00a0\u043a\u0443\u0447\u0435\u0439\u00a0\u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0445\u00a0\u0446\u0438\u0444\u0440\u00a0\u0432\u00a01\u0421.\u0417\u0430\u0434\u0430\u0447\u043a\u0430:\u00a0\u043d\u0430\u00a0\u0441\u0442\u0435\u043b\u043b\u0430\u0436\u0435\u00a0\u0442\u0440\u0438\u00a0\u043f\u043e\u043b\u043a\u0438.\u00a0\u041d\u0430\u00a0\u043f\u0435\u0440\u0432\u043e\u0439\u00a0\u2014 \u043a\u043e\u043d\u0444\u0435\u0442\u044b,\u00a0\u043d\u0430\u00a0\u0432\u0442\u043e\u0440\u043e\u0439\u00a0\u2014 \u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0438,\u00a0\u043d\u0430\u00a0\u0442\u0440\u0435\u0442\u044c\u0435\u0439\u00a0\u2014 \u0441\u0438\u0440\u043e\u043f\u044b.\u00a0 \u041a\u0430\u043a\u00a0\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e\u00a0\u043f\u043e\u043d\u044f\u0442\u044c,\u00a0\u0447\u0442\u043e\u00a0\u043d\u0443\u0436\u043d\u043e\u00a0\u0432\u0437\u044f\u0442\u044c\u00a0\u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0443\u00a0\u0441\u043e\u00a0\u0432\u0442\u043e\u0440\u043e\u0439\u00a0\u043f\u043e\u043b\u043a\u0438?\u041e\u0442\u0432\u0435\u0442:\u00a0\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u00a0\u0432\u0441\u044e\u00a0\u044d\u0442\u0443\u00a0\u043a\u0440\u0430\u0441\u043e\u0442\u0443\u00a0\u0432\u00a0\u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0438!\u00a0\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u044f\u00a0\u2014 \u044d\u0442\u043e\u00a0\u0441\u0442\u0430\u0440\u0430\u044f\u00a0\u0434\u043e\u0431\u0440\u0430\u044f\u00a0\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f,\u00a0\u043a\u043e\u0442\u043e\u0440\u0430\u044f:\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u043d\u0435\u00a0\u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u00a0(\u0432\u00a0\u043e\u0442\u043b\u0438\u0447\u0438\u0435\u00a0\u043e\u0442\u00a03D,\u00a0\u0433\u0434\u0435\u00a0\u0432\u0430\u0448\u00a0\u041f\u041a\u00a0\u043c\u043e\u0436\u0435\u0442\u00a0\u043d\u0430\u0447\u0430\u0442\u044c\u00a0\u043c\u0435\u0447\u0442\u0430\u0442\u044c\u00a0\u043e\u00a0\u043f\u0435\u043d\u0441\u0438\u0438);\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442\u00a0\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u00a0\u043f\u0440\u0435\u0434\u043c\u0435\u0442\u00a0\u043f\u043e\u0434\u00a0\u0443\u0433\u043b\u043e\u043c\u00a0\u0432\u00a030\u2218;\u0434\u0430\u0451\u0442\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u00a0\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u00a0\u0443\u0433\u043b\u044b\u00a0\u043e\u0431\u0437\u043e\u0440\u0430\u00a0(\u043d\u0443,\u00a0\u0438\u043b\u0438\u00a0\u0445\u043e\u0442\u044f\u00a0\u0431\u044b\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0\u0447\u0435\u0442\u044b\u0440\u0435\u00a0\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445\u00a0\u0432\u0438\u0434\u0430\u00a0\u2014 \u044d\u0442\u043e\u0433\u043e\u00a0\u0445\u0432\u0430\u0442\u0438\u0442).\u041a\u0430\u043a\u00a0\u044d\u0442\u043e\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0\u0432\u00a01\u0421?\u0417\u0434\u0435\u0441\u044c\u00a0\u043d\u0430\u043c\u00a0\u043f\u043e\u043c\u043e\u0436\u0435\u0442\u00a0\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\u00a0\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u00a0HTML\u00a0\u0432\u043d\u0443\u0442\u0440\u0438\u00a01\u0421.\u00a0\u0415\u0441\u043b\u0438\u00a0\u0432\u044b\u00a0\u043d\u0435\u00a0\u0437\u043d\u0430\u043b\u0438,\u00a0\u0442\u043e\u00a01\u0421\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u00a0\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443\u00a0WebKit,\u00a0\u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u0443\u044e\u00a0\u0443\u00a0\u0430\u0439\u0444\u043e\u043d\u043e\u0432\u00a0(\u043b\u0443\u0447\u0448\u0438\u0435\u00a0\u043c\u0438\u0440\u043e\u0432\u044b\u0435\u00a0\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438,\u00a0\u0434\u0430).\u0428\u0430\u0433\u00a01.\u00a0\u0421\u043e\u0437\u0434\u0430\u0451\u043c\u00a0\u0432\u043d\u0435\u0448\u043d\u044e\u044e\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443\u00a0\u0438\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u0432\u00a0\u043d\u0435\u0451\u00a0\u041f\u043e\u043b\u0435HTML\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.\u0428\u0430\u0433\u00a02.\u00a0\u0421\u043e\u0437\u0434\u0430\u0451\u043c\u00a0\u0442\u0440\u0438\u00a0\u043c\u0430\u043a\u0435\u0442\u0430:\u00a0HTML,\u00a0JS\u00a0\u0438\u00a0CSS.\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041c\u0430\u043a\u0435\u0442\u00a0HTML\u00a0\u2014 \u044d\u0442\u043e\u00a0\u043a\u0430\u0440\u043a\u0430\u0441\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u043a\u043e\u0434:html&lt;!DOCTYPE html&gt;&lt;HTML&gt;&lt;HEAD&gt;@CSS&lt;\/HEAD&gt;&lt;BODY&gt;&lt;h1&gt;\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0435\u0442\u043a\u0430 10 \u00d7 10 \u0441 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438&lt;\/h1&gt;&lt;div id=&#8217;grid-container&#8217;&gt;&lt;\/div&gt;@JS&lt;\/BODY&gt;&lt;\/HTML&gt;\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u041c\u0430\u043a\u0435\u0442\u00a0JS\u00a0\u2014 \u044d\u0442\u043e\u00a0\u043b\u043e\u0433\u0438\u043a\u0430.\u00a0\u0417\u0434\u0435\u0441\u044c\u00a0\u043c\u044b:o\u00a0\u00a0\u00a0 \u0441\u043e\u0437\u0434\u0430\u0451\u043c\u00a0\u0441\u0435\u0442\u043a\u0443\u00a0\u0438\u0437\u00a0\u044f\u0447\u0435\u0435\u043a;o\u00a0\u00a0\u00a0 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u044b\u00a0(\u043a\u043e\u043d\u0444\u0435\u0442\u044b,\u00a0\u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0438,\u00a0\u0441\u0438\u0440\u043e\u043f\u044b);o\u00a0\u00a0\u00a0 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u00a0\u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c\u00a0\u0438\u0445\u00a0\u043c\u044b\u0448\u043a\u043e\u0439\u00a0(drag\u00a0&amp; drop);o\u00a0\u00a0\u00a0 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u043c\u00a0\u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u043f\u0440\u0438\u00a0\u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438;o\u00a0\u00a0\u00a0 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c,\u00a0\u0437\u0430\u043d\u044f\u0442\u0430\u00a0\u043b\u0438\u00a0\u044f\u0447\u0435\u0439\u043a\u0430,\u00a0\u043f\u0440\u0435\u0436\u0434\u0435\u00a0\u0447\u0435\u043c\u00a0\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c\u00a0\u0442\u0443\u0434\u0430\u00a0\u043d\u043e\u0432\u044b\u0439\u00a0\u043e\u0431\u044a\u0435\u043a\u0442.      \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434\u0430 \u0432 \u043c\u0430\u043a\u0435\u0442:      window.onload = function() {\u00a0\u00a0\u00a0 const      gridContainer = document.getElementById(&#8216;grid-container&#8217;);\u00a0\u00a0\u00a0 const occupiedCells = new Set(); \/\/ \u0425\u0440\u0430\u043d\u0438\u0442 \u0437\u0430\u043d\u044f\u0442\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438\u00a0\u00a0\u00a0      const containers = [@Containers];\u00a0\u00a0\u00a0\u00a0      \/\/ \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0435\u0442\u043a\u0438\u00a0\u00a0\u00a0      for (let i = 0; i &lt; 10; i++) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      for (let j = 0; j &lt; 10; j++) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const cell =      document.createElement(&#8216;div&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.className = &#8216;cell&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.style.left = ${j *      90}px;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.style.top = ${i *      50}px;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.dataset.row = i;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.dataset.col = j;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b x \u0438 y \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.setAttribute(&#8216;data-x&#8217;, i);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.setAttribute(&#8216;data-y&#8217;,      j);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 gridContainer.appendChild(cell);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0\u00a0      \/\/ \u0420\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432\u00a0\u00a0\u00a0      containers.forEach(container =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const item =      document.createElement(&#8216;div&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.className = &#8216;draggable-item&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.textContent = container.text;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.draggable = true;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.style.backgroundColor =      container.color;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.style.zIndex =      parseInt(container.x \/ container.y * 100,10); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const Top =      document.createElement(&#8216;div&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Top.className = &#8216;top&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Top.textContent =\u00a0      container.text;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Top.style.backgroundColor =      container.color;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const Front =      document.createElement(&#8216;div&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Front.className = &#8216;front&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Front.style.backgroundColor =      container.color;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const Right = document.createElement(&#8216;div&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Right.className = &#8216;right&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Right.textContent =\u00a0      container.text;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Right.style.backgroundColor =      container.color;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.appendChild(Top);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.appendChild(Front);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.appendChild(Right);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 draggable-item\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      item.setAttribute(&#8216;data-color&#8217;, container.color);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-text&#8217;,      container.text);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-x&#8217;,      container.x);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-y&#8217;,      container.y);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.setAttribute(&#8216;data-z&#8217;,      container.z);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u044f\u0447\u0435\u0439\u043a\u0443 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e      \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c x \u0438 y\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      const targetCell =      document.querySelector(.cell[data-row=&#187;${container.x}&#187;][data-col=&#187;${container.y}&#187;]);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (targetCell) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      targetCell.appendChild(item);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0443 \u043a\u0430\u043a \u0437\u0430\u043d\u044f\u0442\u0443\u044e\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      occupiedCells.add(${container.x},${container.y});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0\u00a0      let draggedItem = null;\u00a0\u00a0\u00a0      let originalCell = null;\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f\u00a0\u00a0\u00a0      function handleDragStart(e) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem = this;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      originalCell = this.parentElement;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      e.dataTransfer.setData(&#8216;text\/plain&#8217;, null);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c Ghost \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0438\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var img =      document.createElement(&#171;img&#187;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 img.src = &#171;&#187;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      e.dataTransfer.setDragImage(img, 0, 0);\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f\u00a0\u00a0\u00a0      document.addEventListener(&#8216;dragend&#8217;, () =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (draggedItem) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem = null;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      originalCell = null;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0435\u043a \u0441\u0435\u0442\u043a\u0438\u00a0\u00a0\u00a0      document.querySelectorAll(&#8216;.cell&#8217;).forEach(cell =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u2014 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u0438      \u0433\u0440\u0430\u043d\u0438\u0446\u044b\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.addEventListener(&#8216;mouseenter&#8217;, () =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.style.backgroundColor = &#8216;rgba(135, 206, 235, 0.3)&#8217;; \/\/      \u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0433\u043e\u043b\u0443\u0431\u043e\u0439\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.style.borderColor = &#8216;blue&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.style.zIndex = &#8217;10&#8217;; \/\/ \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.style.boxShadow = &#8216;0 0 8px rgba(0, 123, 255, 0.5)&#8217;; \/\/      \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.addEventListener(&#8216;mouseleave&#8217;, () =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0432\u0438\u0434\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.style.backgroundColor = &#187;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.style.borderColor =      &#8216;#999&#8217;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.style.zIndex = &#187;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.style.boxShadow = &#187;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.addEventListener(&#8216;dragover&#8217;,      (e) =&gt; e.preventDefault());\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cell.addEventListener(&#8216;drop&#8217;, (e) =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      e.preventDefault();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (!draggedItem) return;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const row = cell.dataset.row;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const col = cell.dataset.col;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const cellKey = ${row},${col};\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0437\u0430\u043d\u044f\u0442\u0430 \u043b\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (occupiedCells.has(cellKey)) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert(&#8216;\u042f\u0447\u0435\u0439\u043a\u0430 \u0443\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u0430!      \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044e.&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      if (originalCell) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const origRow =      originalCell.dataset.row;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const origCol =      originalCell.dataset.col;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 occupiedCells.delete(${origRow},${origCol});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b draggable-item \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem.setAttribute(&#8216;data-x&#8217;, row);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      draggedItem.setAttribute(&#8216;data-y&#8217;, col);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043d\u043e\u0432\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u2014 \u043e\u043d      \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u043f\u043b\u043e\u0449\u0430\u0434\u044c \u044f\u0447\u0435\u0439\u043a\u0438\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      cell.appendChild(draggedItem);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      occupiedCells.add(cellKey);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0\u00a0      \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430      \u043f\u043e\u043b\u0435\u00a0\u00a0\u00a0 document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(item      =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.addEventListener(&#8216;dragstart&#8217;,      handleDragStart);\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0      document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(item =&gt; {\u00a0\u00a0\u00a0 item.addEventListener(&#8216;mouseenter&#8217;, () =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(otherItem      =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (otherItem !== item) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      otherItem.classList.add(&#8216;dimmed&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0\u00a0      item.addEventListener(&#8216;mouseleave&#8217;, () =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.querySelectorAll(&#8216;.draggable-item&#8217;).forEach(otherItem      =&gt; {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 otherItem.classList.remove(&#8216;dimmed&#8217;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      });\u00a0\u00a0\u00a0      });});\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/ \u0417\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u044b\u0448\u0438\u00a0\u00a0\u00a0 document.addEventListener(&#8216;contextmenu&#8217;,      e =&gt; e.preventDefault());}\u00a0\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  \u041c\u0430\u043a\u0435\u0442\u00a0CSS\u00a0\u2014 \u044d\u0442\u043e\u00a0\u0441\u0442\u0438\u043b\u044c.\u00a0\u0417\u0434\u0435\u0441\u044c\u00a0\u043c\u044b\u00a0\u0437\u0430\u0434\u0430\u0451\u043c\u00a0\u0446\u0432\u0435\u0442\u0430,\u00a0\u0440\u0430\u0437\u043c\u0435\u0440\u044b,\u00a0\u0442\u0435\u043d\u0438,\u00a0\u0443\u0433\u043b\u044b\u00a0\u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430\u00a0\u0438\u00a0\u043f\u0440\u043e\u0447\u0438\u0435\u00a0\u043a\u0440\u0430\u0441\u043e\u0442\u044b.\u00a0\u0418\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u044f\u00a0\u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f\u00a0\u0447\u0435\u0440\u0435\u0437\u00a0transform: rotate(-30deg) skewX(30deg)\u00a0\u2014 \u043c\u0430\u0433\u0438\u044f,\u00a0\u0430\u00a0\u043d\u0435\u00a0\u043a\u043e\u0434!\u041a\u043e\u0434\u00a0\u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u0435:\u00a0\u043c\u0430\u0433\u0438\u044f\u00a0\u0434\u0430\u043d\u043d\u044b\u0445\u0412\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435\u00a0\u041f\u0440\u0438\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0438\u041d\u0430\u0421\u0435\u0440\u0432\u0435\u0440\u0435\u00a0\u043f\u0438\u0448\u0435\u043c\u00a0\u043a\u043e\u0434,\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0439:1.\u00a0\u00a0\u00a0 \u0411\u0435\u0440\u0451\u0442\u00a0\u043c\u0430\u043a\u0435\u0442\u044b\u00a0HTML,\u00a0JS\u00a0\u0438\u00a0CSS.2.\u00a0\u00a0\u00a0 \u041f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u00a0CSS\u00a0\u0438\u00a0JS\u00a0\u0432\u00a0HTML\u00a0(\u0447\u0435\u0440\u0435\u0437\u00a0@CSS\u00a0\u0438\u00a0@JS).3.\u00a0\u00a0\u00a0 \u0414\u0435\u043b\u0430\u0435\u0442\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u00a0\u043a\u00a0\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0443\u00a0\u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u044f,\u00a0\u0447\u0442\u043e\u0431\u044b\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u00a0\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b\u00a0\u044f\u0447\u0435\u0435\u043a\u00a0\u0438\u00a0\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\u00a0\u043e\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445.4.\u00a0\u00a0\u00a0 \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432\u00a0\u0441\u00a0\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438\u00a0(\u0446\u0432\u0435\u0442,\u00a0\u0442\u0435\u043a\u0441\u0442,\u00a0\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b).5.\u00a0\u00a0\u00a0 \u041f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u00a0\u044d\u0442\u043e\u0442\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u00a0\u0432\u00a0HTML\u00a0(\u0432\u043c\u0435\u0441\u0442\u043e\u00a0@Containers).\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u041f\u0440\u0438\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0438\u041d\u0430\u0421\u0435\u0440\u0432\u0435\u0440\u0435:bsl\u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 = \u0420\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u0424\u043e\u0440\u043c\u044b\u0412\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435(&#171;\u041e\u0431\u044a\u0435\u043a\u0442&#187;);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML = \u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u041c\u0430\u043a\u0435\u0442(&#171;\u041c\u0430\u043a\u0435\u0442HTML&#187;).\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0422\u0435\u043a\u0441\u0442();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 JS = &#171;&lt;script&gt;&#187; + \u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u041c\u0430\u043a\u0435\u0442(&#171;\u041c\u0430\u043a\u0435\u0442JS&#187;).\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0422\u0435\u043a\u0441\u0442() + &#171;&lt;\/script&gt;&#187;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CSS = &#171;&lt;style&gt;&#187; + \u041e\u0431\u044a\u0435\u043a\u0442\u0412\u043d\u0435\u0448\u043d\u0435\u0439\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u041c\u0430\u043a\u0435\u0442(&#171;\u041c\u0430\u043a\u0435\u0442CSS&#187;).\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0422\u0435\u043a\u0441\u0442() + &#171;&lt;\/style&gt;&#187;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML = \u0421\u0442\u0440\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c(HTML,&#187;@CSS&#187;,CSS);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML = \u0421\u0442\u0440\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c(HTML,&#187;@JS&#187;,JS);\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u0422\u0443\u0442 \u043f\u0438\u0448\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u043d\u0435\u0439\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0417\u0430\u043f\u0440\u043e\u0441 = \u041d\u043e\u0432\u044b\u0439 \u0417\u0430\u043f\u0440\u043e\u0441;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0417\u0430\u043f\u0440\u043e\u0441.\u0422\u0435\u043a\u0441\u0442 = \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &#171;\u0412\u042b\u0411\u0420\u0410\u0422\u042c \u0420\u0410\u0417\u041b\u0418\u0427\u041d\u042b\u0415\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u0443\u043a\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u042f\u0447\u0435\u0435\u043a\u041e\u0441\u0442\u0430\u0442\u043a\u0438.\u042f\u0447\u0435\u0439\u043a\u0430.\u0420\u044f\u0434 \u041a\u0410\u041a X,\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 |\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-484766","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/484766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=484766"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/484766\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=484766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=484766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=484766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}