javascript

Question

我在javascript中为学校项目制作了某种便利贴。我已经制作了按钮，可以添加注释（它们现在只是div），没有任何文字。我可以通过在每个音符上按红色div来删除它们。还有计数器计算屏幕上的实际笔记数，另一个计算所有笔记，从第一个开始。我还要做另外三件事：

1. 按住绿色div并在移动鼠标的同时按住它来改变每个音符的大小。
2. 按黄色div打开Tinymce编辑器。好吧，开启者工作，但我需要关闭它，通过按红色div和按绿色div我需要保存书面文本在注释，这打开编辑。
3. 选择多个笔记，例如桌面上Windows中的某些文件，然后移动它。移动一组笔记。

我希望有人会帮助我：/我真的需要这个。

我目前的代码：

var cnt = 0;
var x = 0;
var y = 0;
var xx = 0;
var yy = 0;
var counter = 0;
var ilosc = 0;
var dragging = false;
var klikd = false;

document.addEventListener("onload",Load());

function Load(){
    tinyMCE.init({
        mode : "textareas",
        theme : "modern"
    });
}

function adder(){
    //alert("thall");

    var paper = document.createElement("div");
    var paperS = document.createElement("div");
    var paperX = document.createElement("div");
    var paperW = document.createElement("div");
    paper.setAttribute("id","kartka"+counter);
    paper.setAttribute("onmousedown","itsyourmoove(this,event)");
    paper.setAttribute("onmouseup","nara(this)");
    paper.setAttribute("onmouseleave","elo(this)");
    paperX.setAttribute("id","deleter");
    paperX.setAttribute("onclick","killmepls("+counter+")");
    paperS.setAttribute("id","size");
    paperS.setAttribute("onmousedown","sizechanger(this,event)");
    paperW.setAttribute("id","write");
    paperW.setAttribute("onclick","writeTxt("+counter+")");
    paper.setAttribute("class","kartka");
    paper.appendChild(paperX);
    paper.appendChild(paperS);
    paper.appendChild(paperW);
    document.body.appendChild(paper);
    counter++;
    ilosc++;

    document.getElementById("counter").innerHTML = "Przebieg = " + counter + "<br>" + "Ilosc kartek na tablicy: " + ilosc;
}


function itsyourmoove(e,event)
{
    cnt++;
    e.style.zIndex = cnt; //The z-index property specifies the stack order of an element.
    x = event.clientX;
    y  = event.clientY;
    xx = e.style.left;
    yy = e.style.top;
    xx = xx.slice(0,xx.search("px"));
    yy = yy.slice(0,yy.search("px"));
    x = x - xx;
    y = y - yy;

    e.setAttribute("onmousemove","move(this,event)");

}

function writeTxt(){
    //alert("meme");
    var tiny = document.getElementById("editor");
    tiny.style.visibility = "visible";
    var tindiv = document.getElementById("tiny");
    tindiv.style.visibility = "visible";

}

function killmepls(e){
    //e.parentElement.id="USUNTO";
    //var iks = document.getElementById("USUNTO");
    //iks.parentNode.removeChild(iks);
    document.body.removeChild(document.getElementById("kartka"+e));
    ilosc--;
    document.getElementById("counter").innerHTML = "Przebieg = " + counter + "<br>" + "Ilosc kartek na tablicy: " + ilosc;


}

function move(e,event){
    e.style.top = event.clientY - y + "px";
    e.style.left = event.clientX - x + "px";
}

function elo(e){
    e.setAttribute("onmousemove","nothing()");
}

function nara(e){
    e.setAttribute("onmousemove","nothing()");
}
function nothing(){
    console.log("nice meme");
    //alert("you've got memed");
}

function sizechanger(e, event){

    e.setAttribute("onmousedown","changeWidthHeight(this,event)");
    klikd = true;
}

function changeWidthHeight(e,event){
    if(klikd = true){
    p = e.parentElement;
    event.clientY = y;
    event.clientX = x;
    p.style.width = (e.clientX - parseInt(getComputedStyle(p).left)) + "px";
    p.style.height = (e.clientX - parseInt(getComputedStyle(p).top)) + "px";
    }else{
        nothing();
        }
}
var close = document.getElementById("exit");

    close.onmousedown = function () {
        var tiny = document.getElementById("ed");
        tiny.style.visibility = "hidden";
        var tindiv = document.getElementById("tiny");
        tindiv.style.visibility = "hidden";
        var my_editor_id = 'content';
        tinymce.get(my_editor_id).setContent(' '); 
    }

http://plnkr.co/edit/OhaTPf58wVHwpLrPq8zg?p=preview