个人中心
gpt4 book ai didi

javascript - 使用 append 定位 jQuery 元素

转载 作者：行者123 更新时间：2023-11-28 03:11:46 25 4
gpt4 key购买 nike

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

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

enter image description here

为此

enter image description here

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

代码

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 代码中，您可以找到它。

关于javascript - 使用 append 定位 jQuery 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45677750/

25 4 0
文章推荐： html - 如何在导航栏中放置图标
文章推荐： html - 为什么 Internet Explorer 手机会放大元素？
文章推荐： javascript - 为什么 jQuery 无法触发对 anchor 标记的 native 点击？
文章推荐： javascript - 自定义密码要求的正则表达式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com