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

代码语言：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 {
  display: block;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.note {
  position: absolute;
  width: 20rem;
  height: auto;
  border: 4px solid #033649;
  border-top: 3 px solid #033649;
  border-bottom: 3 px solid #033649;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  top: 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0px 0px 5px 0px rgba(3, 54, 73, 0.75);
}
.note .mainbar {
  width: 100%;
  height: 2em;
  line-height: 2em;
  background: #CDB380;
  vertical-align: center;
}
.note .mainbar span {
  color: #033649;
  text-align: center;
  display: inline-block;
  margin-left: 0.5em;
  font-size: 1em;
}
.note .minimize, .note .close {
  font-size: 1.2em;
  color: #033649;
  width: 1em;
  height: 1em;
  float: right;
  margin-right: 0.3em;
}
.note .text {
  color: #031634;
  background: #E8DDCB;
  padding: 1em;
  -webkit-transition: font-size .3s ease-in;
  transition: font-size .3s ease-in;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}

.minimized {
  font-size: 0;
  -webkit-transition: font-size .3s ease-out;
  transition: font-size .3s ease-out;
}

.closed {
  opacity: 0;
  -webkit-transition: opacity 0.8s ease-out;
  transition: opacity 0.8s ease-out;
}
</style>

</head>
<body translate="no">
<div class="add">
<span>Add note</span>
<i class="fa fa-plus-square-o fa-fw"></i>
</div>
<div class="add-note">
<input name="title" id="title" maxlength="50" placeholder="Title" />
<textarea name="text" id="text" cols="25" rows="5" placeholder="Text"></textarea>
<button>Add</button>
</div>
<div class="wrapper">
</div>
<script id="entry-template" type="text/x-handlebars-template">
    <div class="mainbar">
      <span>{{title}}</span>
      <div class="close"><i class="fa fa-times-circle fa-fw"></i></div>
      <div class="minimize"><i class="fa fa-minus-square-o fa-fw"></i></div>
    </div>
    <pre class="text">{{text}}</pre>
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/handlebars.3.0.js"></script>
<script>
var zIndex = 1;

(function(window, document) {
  window.addEventListener('load', loaded, false);

  function loaded() {
    window.removeEventListener('load', loaded, false);
    main();
  }

  function m.........完整代码请登录后点击上方下载按钮下载查看