JS, CSSでクリックしてラベル選択を書いてみた

どうも。

 UIの一つとして使える、クリックしてラベル付けをする挙動をJS, CSSを用いて実装してみました。jQueryで書いててネイティブに起こすのは大変なのではてぶ上では実装してませんが、codepenとかですぐ試せるはずなのでお試しあれ。

HTML

<div class="wrapper">
  <div class="contents">
    <div class="panel_area" id="panel_upper"><ul class="proposed"></ul></div>
    <div id="panel_lower">
    <ul class="proposed">
      <li><a href="#">AAAA</a></li>
      <li><a href="#">BBBB</a></li>
      <li><a href="#">CC</a></li>
      <li><a href="#">DDDDDDDD</a></li>
      <li><a href="#">EEEE</a></li>
      <li><a href="#">FFF</a></li>
      <li><a href="#">GGG</a></li>
      <li><a href="#">HHHHHHHH</a></li>
    </ul>
  </div>
  <button type="button" name="reset" id="reset">reset</button>
</div>

---

JS

$(function() {
  var $node;

  var move_to_upper_panel = function(elem) {
    elem.ready(function() {
      var $li = elem;
      $node = $("<li>" + $li.text() + "<span class="close">×</span></li>");
      $("#pane_upper ul").append($node);
      $li.remove();

      move_to_lower_panel();
    });

    var move_to_lower_panel = function() {
      $node.ready(function() {
        $node.find(".close").on("click", function() {
          var $clicked = $(this).closest('li');
          var text = $($clicked).text();
          var $li = $("<li><a href='#'>" + text.substr(0, text.length - 1) + "</a></li>");
          $("#panel_lower ul").prepend($li);
          $($clicked).remove();
          $li.on('click', function() {
            move_to_upper_panel($(this));
          });
        });
      });
    };
  };

  $("#reset").on('click', function() {
    $("#panel_upper li").find('span').click();
  });

  // entry point
  $(".proposed li").on('click', function() {
    // it will be executed before appended.
    move_to_upper_panel($(this));
  });
});

---

CSS

body {
  height: 100%;
}

.contents {
  width: 860px;
}

ul {
  font-size: 0px;
}

.panel_area {
  margin-bottom: 10px;
}

.proposed {
  min-height: 40px;
  color: #FEE;
  width: 40%;
  background-color: #FB7;
  border: solid 2px;
  border-radius: 4px;
}
ul.proposed li {
  display: inline-block;
  margin: 10px;
  padding: 5px;
  font-size: 20px;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  text-shadow: 1px 1px 5px #000, 1px 0 1px #000;
  border-raduis: 5px;
  background: #F0F;
  text-align: center;
}
ul.proposed li a {
  color: #FEE;
  text-decoration: none;
}
ul.proposed li a:hover {
  color: #0FF;
}

span.close:hover {
  color: #00F;
  cursor: pointer;
}

resetボタンで元どおりになります。

今回はこの辺で。