如何在其他元素内使用CSS定义和定位元素

Question

我正在使用将HTML5与AngularDart和CSS一起使用的拖放查询设计器。对于这个问题，我真正需要弄清楚的是如何格式化HTML5和CSS中的对象。我遇到CSS中对象的格式/位置问题。如果您在下面看，我有一个带有“ queryElement”类的div。对象的queryElementLine，queryElementHead和queryElementBody部分已在此对象中，并且已正确设置格式/位置。

此UI允许用户将一个元素拖放到另一个元素上。放置后，我将作用于对象以将新元素作为子元素添加，但是我需要根据放置新元素/移动元素的放置区元素的哪个边缘来判断元素集合中何处添加新放置的元素

我最近添加了分类为“ something DropZone”（左，上，右，下）的div。这些是我要用来确定将拖动的元素放置到何处的对象。我希望他们模仿顶部，左侧，右侧和底部边框。我希望他们在：hover上显示3px渐变边框，以便用户可以看到他们将拖放的项目拖放到哪里。以下是html和图像元素，可以更好地了解我所面对的以及我想做什么。

这是元素框的外观。

这是添加左边框div时的样子。

该元素中的所有内容均被向下推，并且左侧dropdrop对象及其边框堆叠在其上方。我想要的是将左拖放区与其他查询元素的内容对齐。

这是我创建的图像，用于基本显示我希望将所有4个放置区放置在什么位置：

我最想找的是一些CSS指导，说明如何使dropzone div浮于上图所示的位置。

HTML代码：

<div class="queryElement"
     (drop)="onDrop($event)"
     (dragstart)="onDragStart($event)"
     draggable="true">

    <div class="queryElementLeftDropZone queryElementLeftDropZoneDragOver"></div>
    <div class="queryElementTopDropZone"></div>
    <div class="queryElementBottomDropZone"></div>
    <div class="queryElementRightDropZone"></div>

    <div class="queryElementLine"></div>
    <div class="queryElementHead noselect">
        <span class="idSpacer">#{{cohortQueryElement.id}}</span>
        <button class="elementButton noselect" (click)="edit()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Edit.png" /></button>
        <button class="elementButton noselect" (click)="delete()"><img  src="/packages/GenomicsPortal/assets/images/PNG icons/Trash.png" /></button>
        <button class="elementButton noselect" (click)="toggleIncludeExclude()"><img [src]="cohortQueryElement.includeExcludeImagePath"/></button>
    </div>
    <div class="queryElementBody"> {{cohortQueryElement.displayName}} </div>
    <div class="queryElementFoot"> {{cohortQueryElement.displayData}} </div>
</div>

Answer 1

在对这个问题进行了一些思考之后，我认为我将不添加新的对象/元素以将其悬停在边缘，从而完全避免了该问题。该解决方案似乎引起了格式问题。

发生在我身上，而不是将对象放置在框的边缘上，我可以改为确定x，y范围来定义现有框的顶部，左侧，底部和右侧，然后根据拖动或放置在其中那些x，y坐标。

我将发布消息，让大家知道如何实现。