在 dom 树中的特定位置推送动态创建的删除元素

Posted 2023-05-08

【中文标题】在 dom 树中的特定位置推送动态创建的删除元素

【英文标题】：pushing dynamically created dropped elements at the particular position in the dom tree

【发布时间】：2018-03-24 00:12:41

【问题描述】：

大家好，我有一个关于拖放的问题。我正在创建一个仅通过使用拖放来创建网站的应用程序。我有点坚持实现一个功能，在该功能中，用户可以将元素放置在特定位置，并且该放置元素下方的元素会移动到下方。现在的问题是元素是动态生成的 例如。在右侧面板中有不同的图像形式的组件，当我拖动这些元素时，我传递了一些元数据，当元素被删除时，基于元数据创建一个 html 元素。

<div class="drop-zone">
   <div>
     <!--container 1-->
   </div>
     <!-- now i want to drop that element in between which is generated dynamically -->
   <div>
     <!--container 2-->
   </div>
</div>

**********************编辑************************************

在下面的代码头中放置的是将被拖动的指令，JSONfn与用于字符串化函数的JSON对象相同

(function()
define(['../../../../app','./../service/header.factory.js'],function(app)
    app.directive('headerDrop',['HeaderFactory',function(HeaderFactory)
        return 
            restrict: "E",
            replace: false,
            scope: ,
            link: function(scope,element,attrs) 
                element.on('dragstart',function(e)
                   e.originalEvent.dataTransfer.setData("data",JSONfn.stringify(HeaderFactory));
                );
            ,
            template: "<img id='header' draggable='true' src='/src/create_template/images/noimage.jpg' width='100' height='100'> </img>"
        
    ]);
    app.directive('dragContainer',function()
        return 
            restrict: "E",
            replace: false,
            scope: ,
            template: "<div id='elements-container'> <h1 style='text-align:center;'> All </h1><header-drop> </header-drop> </div>"
        
    );
);

)()

控制器内部

element.on('drop',function(event)
        console.log(event);
        if(event.target.className !== "drop-zone")
            event.preventDefault();
            return false;
        
        var data = JSONfn.parse(event.originalEvent.dataTransfer.getData("data"));
        if(data.type=="header")
            var heading = document.createElement("h1");
            console.log("client height" , heading.clientWidth);
            heading.innerHTML = data.textValue;
            //console.log("pageY",event.pageY);
            //console.log("pageX",event.pageX);
            heading.style.position = "relative";
            heading.style.top = ((event.pageY/window.innerHeight)*100)+ "%";
            heading.className = "editable";
            event.target.appendChild(heading);
            heading.style.top = event.clientY;
            addingEvents();
        
    );

【问题讨论】：

“元数据”是指评论节点吗？

元数据是指使用 dataTransfer 传递的数据，如果它是我必须创建的标头，那么我将传递一个字符串“标头”，并基于我传递的数据我从组件屏幕拖动一个元素我生成 html 元素

代码有什么问题？

就像我提到的用例有点通用，如果我有两个 div 并且我在这两个 div 之间放置一个元素，我希望 div 向下移动，但问题是我不知道放置元素的高度，直到它在 dom 上创建，所以我将如何确定需要移动多少元素。您可以看到它类似于通过拖放在数组中添加一个数字，然后用单词 dom 替换数组，用 html 元素替换数字

“那么我如何才能知道需要移动多少元素” 为什么在将元素附加到 DOM 时不执行 procudeure？跨度>

【参考方案1】：

虽然我后来找到了答案，但我实际上用一种天真的方法解决了这个问题。

我正在制作一个模板生成器，所以这种方法对我有用

天真的方法

我所做的是，每当我放下元素时，我在元素上方的高度为 5px 的设计器内又放下了一个块，有点像

<div class="adjacent-block"> </div> inside css .adjacent-block min-height: 5px; 
<div class="dropped-block"> </div>

然后将该元素放到相邻块内。

缺点：你还要跟踪相邻的块

上述方法非常可悲，我不建议任何人这样做

更简单更好的方法：

在 dragover 事件中，只需检查元素是否在另一个元素之上，然后根据鼠标从该元素中间的位置放置元素之前或之后的块。

我还没有实施这种方法，但我很确定这会奏效