javascript - 编辑器里的元素【组合】功能和双击编辑【组合内元素】应该如何设计呢?
PHP中文网
PHP中文网 2017-04-11 13:00:50
0
1
438

例如如图的功能,将多个元素组合成一个了,这样可以一次操作多个元素,然后双击某个元素,就进入到组合内的元素进行操作。

类似 sketch、photoshop 那样的。

不知道该如何合理规划dom结构和各种判断逻辑。

我想到

  1. 各元素应该是平级的

    p#box1
    p#box2
    p#box3
  2. 如果组成组合

    .group
      p#box1
      p#box2
      p#box3
    

如果这个方向是对的,那逻辑应该如何做呢?

PHP中文网
PHP中文网

认证0级讲师

Antworte allen(1)
黄舟

双击编辑内容的行为逻辑,给你给简单示例
至于双击时候具体的UI,比如边上出现的那个框框,就是你自己改样式的事了

直接查看示例:
https://jsfiddle.net/qzwavav9/

或者查看下面代码
HTML

<p class="demo">Lorem ipsum dolor sit amet.</p>

CSS

body {
    background-color: #eee;
}

input {
    vertical-align: top;
    outline: 0;
    border: 0;
}

.demo {
    cursor: pointer;
    border-bottom: 1px dashed;
}

.textarea-focus,
.demo {
    width: 300px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: center;
    padding-bottom: 5px;
}

.textarea-focus {
    border: 1px solid #ccc;
    background-color: #eee;
}

JS

   let demo = document.querySelector('.demo');
    demo.ondblclick = function() {
        let nowText = this.innerText; //初始的文本内容
        let textarea = document.createElement('input'); //创建编辑用的文本框
        textarea.type = 'text';
        textarea.value = nowText;
        textarea.className = 'textarea-focus';

        this.innerText = '';
        this.appendChild(textarea); //只有双击时向p添加input子标签,非双击时会被移除
        textarea.focus(); //双击时候触发input文本框的获得焦点事件

        textarea.onblur = function() { //文本框失去焦点时
            demo.innerText = this.value;
            //重设p的文本为在input文本框中输入的内容
        };
    };
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage