Skip to content

Commit

Permalink
deploy: a51ab7e
Browse files Browse the repository at this point in the history
  • Loading branch information
@quanru
quanru committed Feb 29, 2024
1 parent 7e5b543 commit b0c37ca
Show file tree
Hide file tree
Showing 109 changed files with 391 additions and 391 deletions.
4 changes: 2 additions & 2 deletions 2015/06/14/不要叫我程序猿-我是前端开发工程狮/index.html
View file

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions 2015/06/15/JavaScript权威指南の笔记/index.html
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions 2015/06/16/16宫格拖拽/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>16宫格拖拽 - 林宜丙的博客</title><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#ffffff"><meta name="application-name" content="林宜丙的博客"><meta name="msapplication-TileImage" content="/img/avatar.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="林宜丙的博客"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="apple-touch-icon" sizes="48x48" href="/img/avatar.png"><meta name="description" content="实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。"><meta property="og:type" content="blog"><meta property="og:title" content="16宫格拖拽"><meta property="og:url" content="http://quanru.github.io/2015/06/16/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD/"><meta property="og:site_name" content="林宜丙的博客"><meta property="og:description" content="实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="http://quanru.github.io/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png"><meta property="article:published_time" content="2015-06-16T21:07:03.000Z"><meta property="article:modified_time" content="2024-02-29T15:25:35.784Z"><meta property="article:author" content="林宜丙"><meta property="article:tag" content="JavaScript"><meta property="twitter:card" content="summary"><meta property="twitter:image:src" content="http://quanru.github.io/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"http://quanru.github.io/2015/06/16/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD/"},"headline":"16宫格拖拽","image":["http://quanru.github.io/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png"],"datePublished":"2015-06-16T21:07:03.000Z","dateModified":"2024-02-29T15:25:35.784Z","author":{"@type":"Person","name":"林宜丙"},"publisher":{"@type":"Organization","name":"林宜丙的博客","logo":{"@type":"ImageObject","url":"http://quanru.github.io/img/avatar.png"}},"description":"实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。"}</script><link rel="canonical" href="http://quanru.github.io/2015/06/16/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD/"><link rel="icon" href="/img/favicon.png"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600&amp;family=Source+Code+Pro"><link rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/cookieconsent.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css"><!--!--><!--!--><style>.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#3273dc;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script><!--!--><!--!--><meta name="follow.it-verification-code" content="L1RpaQjCaMfGQ2QX42KT"><!-- hexo injector head_end start --><script>
<html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>16宫格拖拽 - 林宜丙的博客</title><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#ffffff"><meta name="application-name" content="林宜丙的博客"><meta name="msapplication-TileImage" content="/img/avatar.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="林宜丙的博客"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="apple-touch-icon" sizes="48x48" href="/img/avatar.png"><meta name="description" content="实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。"><meta property="og:type" content="blog"><meta property="og:title" content="16宫格拖拽"><meta property="og:url" content="http://quanru.github.io/2015/06/16/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD/"><meta property="og:site_name" content="林宜丙的博客"><meta property="og:description" content="实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://quanru-github-io.pages.dev/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png"><meta property="article:published_time" content="2015-06-16T21:07:03.000Z"><meta property="article:modified_time" content="2024-02-29T15:37:00.207Z"><meta property="article:author" content="林宜丙"><meta property="article:tag" content="JavaScript"><meta property="twitter:card" content="summary"><meta property="twitter:image:src" content="https://quanru-github-io.pages.dev/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"http://quanru.github.io/2015/06/16/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD/"},"headline":"16宫格拖拽","image":["https://quanru-github-io.pages.dev/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png"],"datePublished":"2015-06-16T21:07:03.000Z","dateModified":"2024-02-29T15:37:00.207Z","author":{"@type":"Person","name":"林宜丙"},"publisher":{"@type":"Organization","name":"林宜丙的博客","logo":{"@type":"ImageObject","url":"http://quanru.github.io/img/avatar.png"}},"description":"实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。"}</script><link rel="canonical" href="http://quanru.github.io/2015/06/16/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD/"><link rel="icon" href="/img/favicon.png"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600&amp;family=Source+Code+Pro"><link rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/cookieconsent.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css"><!--!--><!--!--><style>.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#3273dc;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script><!--!--><!--!--><meta name="follow.it-verification-code" content="L1RpaQjCaMfGQ2QX42KT"><!-- hexo injector head_end start --><script>
(function () {
function switchTab() {
if (!location.hash) {
Expand Down Expand Up @@ -38,11 +38,11 @@
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "kvbvszxxym");
</script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="林宜丙的博客" type="application/atom+xml">
</head><body class="is-2-column"><nav class="navbar navbar-main"><div class="container navbar-container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/img/avatar.png" alt="林宜丙的博客" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="/">Home</a><a class="navbar-item" href="/archives">Archives</a><a class="navbar-item" href="/categories">Categories</a><a class="navbar-item" href="/tags">Tags</a><a class="navbar-item" href="/about">About</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/quanru/quanru.github.io"><i class="fab fa-github"></i></a><a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;"><i class="fas fa-list-ul"></i></a><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-8-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2015-06-16T21:07:03.000Z" title="6/16/2015, 9:07:03 PM">2015-06-16</time>发表</span><span class="level-item"><time dateTime="2024-02-29T15:25:35.784Z" title="2/29/2024, 3:25:35 PM">2024-02-29</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a></span><span class="level-item">4 分钟读完 (大约541个字)</span></div></div><h1 class="title is-3 is-size-4-mobile">16宫格拖拽</h1><div class="content"><p>实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。</p>
</head><body class="is-2-column"><nav class="navbar navbar-main"><div class="container navbar-container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/img/avatar.png" alt="林宜丙的博客" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="/">Home</a><a class="navbar-item" href="/archives">Archives</a><a class="navbar-item" href="/categories">Categories</a><a class="navbar-item" href="/tags">Tags</a><a class="navbar-item" href="/about">About</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/quanru/quanru.github.io"><i class="fab fa-github"></i></a><a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;"><i class="fas fa-list-ul"></i></a><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-8-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2015-06-16T21:07:03.000Z" title="6/16/2015, 9:07:03 PM">2015-06-16</time>发表</span><span class="level-item"><time dateTime="2024-02-29T15:37:00.207Z" title="2/29/2024, 3:37:00 PM">2024-02-29</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a></span><span class="level-item">4 分钟读完 (大约547个字)</span></div></div><h1 class="title is-3 is-size-4-mobile">16宫格拖拽</h1><div class="content"><p>实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。</p>
<span id="more"></span>

<h1 id="16宫格拖拽"><a href="#16宫格拖拽" class="headerlink" title="16宫格拖拽"></a>16宫格拖拽</h1><p>实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。</p>
<p><img src="/./post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png" alt="示意图"></p>
<p><img src="https://quanru-github-io.pages.dev/post-img/16%E5%AE%AB%E6%A0%BC%E6%8B%96%E6%8B%BD.png" alt="示意图"></p>
<h1 id="外观处理"><a href="#外观处理" class="headerlink" title="外观处理"></a>外观处理</h1><ul>
<li>设置外层容器与内部方块宽度，并向左浮动，从而构成16宫格;</li>
<li>每个盒子的位置以坐标(x,y)来表示，其中0&lt;x,y&lt;4;</li>
Expand Down
Loading

0 comments on commit b0c37ca

Please sign in to comment.