使用 append 定位 jQuery 元素

debugcn 发表于 Dev

苏里曼·谢里夫

当我将一个容器拖到另一个容器时，我希望该元素附加到另一个容器内。该功能就是这样做的，但我似乎无法解释为什么当元素附加与容器偏移时我试图将其放入。

它可能必须对 css 做一些事情，但我无法确定它发生了什么。下面描述的是正在发生的事情。

对此

我希望该框位于我要附加到的新框的边界内。

编码

HTML

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>grid-cell playground</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />


</head>

<body>
    <script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css"
    href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

    <div class="grid drag-menu">



        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>

        <div class="grid-cell ">
            <div class="plus-icon"></div>
        </div>


    </div>

    <script src="js/index.js"></script>

</body>
</html>

Javascript

var i = 0;
var yourCurrentlyHoveredElement;
var containerPLus = false;


$('.grid-cell')
    .attr("id", 'originalParents')
    .draggable({ containment: ".grid-containment :hover", scroll: false })
        .resizable()
        .droppable({
            over: function (event, ui) {
                yourCurrentlyHoveredElement = $(this); //the 'this' under over event
            },
            drop: function (event, ui) {
            var target = ui.draggable;
            console.log(target);
            if (yourCurrentlyHoveredElement.attr("id") === "originalParents") {
                yourCurrentlyHoveredElement.append(target);
            }
        }
});

$( ".plus-icon" ).click(function() {
    $(this).parent(".grid-cell").append("<div class='grid-cell' onmouseover='call_mouseover()'><p class='number' id = '\" + i + \"'>" + i + "</p>" + "</div>");
    /*1st grid-cell created*/

    $(this).parent(".grid-cell").addClass("grid");

    $('.grid-cell')
        .draggable({containment: ".grid-containment", scroll: false})
        .resizable();

    i++;

    $('.number')
        .draggable({containment: ".grid-cell", scroll: false});
});

function call_mouseover() {

}

CSS

body {
    font: 100 1em/150% "proxima-nova", Helvetica, sans-serif;
    margin: 0;
    position:relative;
}

.cm-container {
    margin: 0 35px;
    border: 3px solid #03A9F4;
}

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
}

.grid-column {
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;

}

.grid-center {
    justify-content: center;
    align-items: center;
}

.grid-align-center {
    align-items: center;
}

.grid-right {
    justify-content: flex-end;
    align-items: center;
}

.grid-column-right {
    justify-content: center;
    align-items: flex-end;
}


.grid-space-around {
    justify-content: space-around;
}

.grid-space-between {
    justify-content: space-between;
}

.grid-cell {
    padding: 4em 4em 4em;
    background: rgba(51, 153, 204, .2);
    transition: background-color 0.3s ease;
    border: 1px solid #33cccc;
    border-radius: 3px;
    position: relative;
    cursor: crosshair;
}

.grid-cell:hover {
    background: rgba(255, 152, 0, 0.29);
}

.self-end {
    align-self: flex-end;
}

.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: center;
}

.self-stretch {
    align-self: stretch;
}

/* flex sizes */

.flex-1 {
    flex: 1;
}


/* text centering*/

.text-center {
    text-align: center;
}


/* other styles */

.title {
    color: #000;
    font-size: 11px;
    position: absolute;
    top: -14px;
    right: 4px;
}

.plus-icon {
    background-image: url("https://cdn0.iconfinder.com/data/icons/math-business-icon-set/93/1_1-512.png");
    background-size: cover;
    height:14px;
    width:14px;
    position: absolute;
    right: 2.5px;
    top: 2.5px;
    cursor:pointer;
    opacity:0.1;
    transition: all 0.5s;
}

.plus-icon:hover {
    transition: all 0.5s;
    opacity:1;
}

.m-paragraph {
    max-width: 250px;
}



.margin-right {
    margin-right: auto;
}

.margin-left {
    margin-left: auto;
}

.margin-top {
    margin-top: auto;
}

/* single-page build settings */

.main-grid-cell {
    height: 93.5vh;
    margin-top: 1px;
}

.logo {
    padding: 0;
}

#logoSVG {
    width: 115px;
    height:50px;
}

.st1 {
    fill: #FFFFFF;
    stroke: #fff;
    stroke-width: 4;
}

svg:hover {
    cursor: pointer;
}

对偏移附加的任何解释？

编辑：所以附加的是一个 JS FIDDLE

https://jsfiddle.net/ecnfk54h/5/

因此，将两个盒子变大一些，然后在其中一个盒子上使用加号。这将附加一个带有数字的新 div 容器。当我将编号框拖到另一个容器并放下它时，项目的位置偏移到我放入的新容器的外部。所以我想知道是什么导致它在新容器内给出不正确的位置。

苏里曼·谢里夫

不是最好的策略，但如果有人想知道。我把目标里面的数据。将它从一个对象转换为一个 HTML 元素，然后添加一个新元素并删除前一个元素。效果很好，但对于更复杂的它肯定会遇到问题

var target = ui.draggable.html();
            if (yourCurrentlyHoveredElement.attr("id") === "originalParents") {
                yourCurrentlyHoveredElement.append("<div class ='.grid-cell' onmouseover='call_mouseover()'><div class='remove'>&times</div>" + target + "</div>");
            }

在 javascript 代码中，您可以找到它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。