前端实践-便签系统（上）

这个便签案例是学习网易云课堂上的便签系统，自己重新整理，以便后期深入学习。

1、布局

<button id="create">创建</button>
    <div class="note">
        <i class="close"></i>
        <div class="editor" contenteditable="true"></div>
        <div class="timestamp">
            <span>更新</span>
            <span class="time">2017-07-01</span>
        </div>
    </div>

body {
    font-size: 14px;
    font-family: "微软雅黑";
}
.note {
    position: absolute;
    width: 200px;
    height: 300px;
    box-shadow:  0 5px 10px rgba(0,0,0,0.5);
    background: #FFE73E;
    padding: 10px;
}
.note .close {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -15px;
    left: -15px;
    background: url(img/deleteButton.png) no-repeat;
    display: none;
}
.note:hover .close {
    display: block;
} 
.note .editor {
    position: absolute;
    bottom: 30px;
    left: 10px;
    top: 10px;
    right: 10px;
    outline: none;
    overflow: auto;
}
.note .timestamp {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    background: #db0;
    color: #fff;
    font-size: 12px;
}

2、创建

布局在js文件里面用ES6的模块字符串写入，代码如下：

  var noteTpl = `   
        <i class="close"></i>
        <div class="editor" contenteditable="true"></div>
        <div class="timestamp">
            <span>更新</span>
            <span class="time">2017-07-01</span>
        </div>
    `;
    function createNote ( options ){
        var note = document.createElement('div');
        note.className = 'note';
        note.innerHTML = noteTpl;       
        document.body.appendChild(note);
        this.note=note;
        this.addEvent();
    };
    document.addEventListener( 'DOMContentLoaded', function(e){
        //创建添加事件
        $('#create').addEventListener('click',function(e){
            new createNote();
        })
    });

3、删除

  createNote.prototype.close = function (e){        
        document.body.removeChild(this.note);
    };
  createNote.prototype.addEvent = function (){
    //关闭处理程序，关闭监听事件
    var closeHandler = function (e){
      this.close(e);
      $('.close',this.note).removeEventListener('click',closeHandler);
    }.bind(this);
    $('.close',this.note).addEventListener('click',closeHandler);
  };

4、移动

主要是在当前的note下添加 mousedown（记录X、Y坐标）、mousemove、mouseup事件

定义全局变量

var moveNote = null;//被移动的note
var startX ;//X坐标
var startY ;//Y坐标
var maxZIndex = 0;//z-index值

创建时，也要创建标签的left值和top值

function createNote ( options ){
        var note = document.createElement('div');
        note.className = 'note';
        note.innerHTML = noteTpl;
        note.style.left = options.left + 'px';
        note.style.top = options.top + 'px';
        note.style.zIndex = options.zIndex;
        document.body.appendChild(note);
        this.note=note;     
        this.addEvent();
    };

$('#create').addEventListener('click',function(e){
  new createNote({
    left:Math.round(Math.random()*(window.innerWidth - 220)),
    top:Math.round(Math.random()*(window.innerHeight - 320)),
    zIndex: maxZIndex++,
  });
})

添加mousedown事件

var mousedownHandler = function (e){
  moveNote = this.note;
  startX = e.clientX - this.note.offsetLeft;
  startY = e.clientY - this.note.offsetTop;
  if(parseInt(this.note.style.zIndex)!==maxZIndex - 1){
    this.note.style.zIndex = maxZIndex++;
    }
  }.bind(this);
this.note.addEventListener('mousedown' , mousedownHandler);

添加mousemove事件

//移动监听
var mousemoveHandler = function (e){
  if(!moveNote){
    return;
  }
  moveNote.style.left = e.clientX - startX + 'px';
  moveNote.style.top = e.clientY - startY + 'px';  
}
document.addEventListener('mousemove', mousemoveHandler);

添加mouseup事件

var mouseupHandler = function (e){
  moveNote = null;
}
document.addEventListener('mouseup', mouseupHandler);