有赞的微商城可视化编辑是如何做到的？

有赞的可视化图片描述

如上图：
随便点击椭圆中的一项添加，会弹出一个对应的div，这个div是事先定义好的吗？是不是通过display的两个属性显示和隐藏的，即none表示不显示，block表示显示呢？？
还是说把这个弹出的div保存起来到数组中呢？
如果有对这个熟悉了解的，请大家解答一下，感激不尽！！！

javascript css

html5 html

阅读 7.7k

5 个回答

kikong

✓ 已被采纳

事先定义好或动态生成都可以~

例如动态生成:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dynamidDiv{
            width:100%;
            height:100%;
            border:1px solid red;
            background-color: red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div style="height:30px;">
<div id="showDiv" style="display:inline-block;width: 100px;height: 20px;background-color: white;border: 1px solid gray;line-height: 20px;text-align: center">显示DIV</div>
<div id="closeDiv" style="display:inline-block;width: 100px;height: 20px;background-color: white;border: 1px solid gray;line-height: 20px;text-align: center">关闭DIV</div>
</div>
<div id="dynamicContainer" style="display: none;width:300px;height:300px;margin-top:20px;"></div>
<script>

    function createDiv(){
        var containerDiv=document.getElementById("dynamicContainer");
        var newDynamicDiv=document.createElement("div");
        document.getElementById("dynamidDiv")&&containerDiv.removeChild(document.getElementById("dynamidDiv"));
        newDynamicDiv.id="dynamidDiv";
        newDynamicDiv.setAttribute("class","dynamidDiv");
        containerDiv.appendChild(newDynamicDiv);
        containerDiv.style.display="block";

    }

    function closeDiv(){
        var containerDiv=document.getElementById("dynamicContainer");
        document.getElementById("dynamidDiv")&&containerDiv.removeChild(document.getElementById("dynamidDiv"));
        containerDiv.style.display="none";
    }

    document.getElementById("showDiv").addEventListener("click",function(){
        createDiv();

    },false);

    document.getElementById("closeDiv").addEventListener("click",function(){
        closeDiv();
    },false);

</script>
</body>
</html>

已废弃

1.3k2815

发布于
2016-08-03

首先是定义好［模块］，每一个可拖动过来的组件都是一个［模块］（解耦），［模块］里最重要的又是［html模板］，它定义了html结构和样式；其次是［数据］，［数据］就是模板里面的内容，一般页面初始化时会有一个默认数据。在把一个模块拖动过来的时候，就先拿到［html模版］，然后和［数据］结合，动态生成html代码，最后显示在页面。