前端实践-便签系统(上)

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

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坐标)、mousemovemouseup事件

定义全局变量
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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,370评论 0 8
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,481评论 25 708
  • 风雪刮不倒 敌人打不倒 我们学习 我们前进
    蔷薇飒阅读 222评论 0 0
  • 今天刚在朋友圈中,发现了这个可以宣泄内心的想法的软件,这里没有纷争没有什么所谓的虚伪和勾心斗角…… 不知道从什么时...
    丑小鸭的书阅读 223评论 0 0
  • 我记得我家以前在向阳巷
    思绪的速度阅读 332评论 0 0