拖拽生成HTML

Html

Css


    
        
        标签(双击修改)
     ^×
    



    
    
    
    字体:
    

    字号:
    
    字体颜色:

body {
	-moz-user-select:none;
	/*火狐*/
    -webkit-user-select:none;
	/*webkit浏览器*/
    -ms-user-select:none;
	/*IE10*/
    -khtml-user-select:none;
	/*早期浏览器*/
    user-select:none;
}

// 
document.onselectstart = document.ondrag = function() {
    return false;
}
//tag num
var num = 1;

function mouseDown(ev) {
    var oDiv = document.getElementById(ev.id);
    oDiv.onmousedown = function(ev) {
        var oEvent = ev || event;
        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;
        if (oDiv.setCapture) {
            oDiv.onmousemove = mouseMove;
            oDiv.onmouseup = mouseUp;
            oDiv.setCapture();
        } else {
            document.getElementById("back").onmousemove = mouseMove;
            document.getElementById("back").onmouseup = mouseUp;
            return false; //解决firefox第二次拖拽时发生的bug;
        }

function mouseUp(ev) {

this.onmousemove = null;
            this.onmouseup = null;
            if (oDiv.releaseCapture) {
                oDiv.releaseCapture();
            }
            getHTML();
        }
    }
}
//取到HTML
function getHTML() {
    var newHTML = document.getElementById("allDiv").innerHTML;
    //alert(document.getElementById("allDiv").innerHTML);
    document.getElementById("innerHTML").value = newHTML;
}
//更改标签内容
function changeName(newL) {
    var comment = prompt("请输入标签内容", "");
    if (comment != null && comment != "") {
        newL.innerHTML = comment + '<sup style="color:red;display:none;width:40px;float: right;" onclick="delect(this)"> ×</sup>';
    }
}
//添加新标签
function addTag() {
    var newLabel = '<label id="tag' + num + '" style="width:auto; height:auto; position:absolute;margin-left: 10px;font-size:10px;"  ondblclick="changeName(this)" onmousedown="mouseDown(this)" onmouseover="supShow(this)" onmouseout="supHide(this)">标签(双击修改) <sup style="color:red;display:none;width:40px;float: right;" onclick="delect(this)"> ×</sup></label>';
    document.getElementById("back").innerHTML += newLabel;
    num++;
    fontSize = 10;
}
//删除当前标签
function delect(ev) {
    document.getElementById(ev.parentNode.parentNode.id).removeChild(document.getElementById(ev.parentNode.id));

}
//显示删除按钮
function supShow(ev) {
    ev.firstElementChild.style.display = "block";
}
//隐藏删除按钮
function supHide(ev) {
    ev.firstElementChild.style.display = "none";
}
//字号
function changeFontSize() {
    var currentSize = document.getElementById("fontSizeSelect").value;
    var number = num - 1;
    document.getElementById("tag" + number).style.fontSize = currentSize;
}
//字体
function changeFont() {
    var currentFont = document.getElementById("fontSelect").value;
    var number = num - 1;
    document.getElementById("tag" + number).style.fontFamily = currentFont;
}
//字体颜色
function changeColor() {
    var currentColor = document.getElementById("fontColorSelect").selectedOptions[0].style.backgroundColor;
    var number = num - 1;
    document.getElementById("tag" + number).style.color = currentColor;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

拖拽生成HTML

代码描述：拖拽生成页面代码

拖拽生成html代码，生成页面

2

最新

发表评论全部评论

暂时没有评论！

Alex0

2017/11/7 17:07:48

厉害
回复

常国0

2017/10/18 14:37:53

厉害啊
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

常国

相关代码

拖拽生成HTML

最新