Question

当我将一个容器拖到另一个容器时，我希望该元素追加到另一个容器中。该功能就是这样，但我似乎无法破译为什么当元素追加偏离容器时我试图将其放入。

它可能需要对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容器。当我将编号框拖到另一个容器并放下它时，项目的位置偏移到我正在放入的新容器的外部。所以我想知道是什么导致它在新容器内给出错误的位置。

Answer 1

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

android:settingsActivity="com.example.android.accessibility.ServiceSettingsActivity"

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

使用append定位jQuery的元素

1 个答案: