這個(gè)便簽案例是學(xué)習(xí)網(wǎng)易云課堂上的便簽系統(tǒng)，自己重新整理，以便后期深入學(xué)習(xí)。

1、布局

<button id="create">創(chuàng)建</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、創(chuàng)建

布局在js文件里面用ES6的模塊字符串寫(xiě)入，代碼如下：

  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){
        //創(chuàng)建添加事件
        $('#create').addEventListener('click',function(e){
            new createNote();
        })
    });

3、刪除

  createNote.prototype.close = function (e){        
        document.body.removeChild(this.note);
    };
  createNote.prototype.addEvent = function (){
    //關(guān)閉處理程序，關(guān)閉監(jiān)聽(tīng)事件
    var closeHandler = function (e){
      this.close(e);
      $('.close',this.note).removeEventListener('click',closeHandler);
    }.bind(this);
    $('.close',this.note).addEventListener('click',closeHandler);
  };

4、移動(dòng)

主要是在當(dāng)前的note下添加 mousedown（記錄X、Y坐標(biāo)）、mousemove、mouseup事件

定義全局變量

var moveNote = null;//被移動(dòng)的note
var startX ;//X坐標(biāo)
var startY ;//Y坐標(biāo)
var maxZIndex = 0;//z-index值

創(chuàng)建時(shí)，也要?jiǎng)?chuàng)建標(biāo)簽的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事件

//移動(dòng)監(jiān)聽(tīng)
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);