js实现一个可拖动的标签记录系统-html代码-BFW代码库

js实现一个可拖动的标签记录系统

代码语言：html

所属分类：其他

代码描述：js实现一个可拖动的标签记录系统

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  font-size: 16px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
  background: white;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, white 0%, #f6f6f6 47%, #ededed 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  overflow: hidden;
}

.add {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 1000;
  color: #031634;
  font-size: 3em;
}
.add span {
  font-size: 0.333em;
}

.add-note {
  background: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 6em;
  right: 4em;
  z-index: 1000;
  text-align: right;
  padding: 1em;
  border-radius: 5px;
  display: none;
}
.add-note textarea {
  width: 100%;
  resize: none;
  overflow-x: hidden;
}
.add-note input {
  width: 100%;
}
.add-note.hidden {
  .........完整代码请登录后点击上方下载按钮下载查看