从区域中取消附加 JQuery 拖放项目而不删除或隐藏它答案

【问题标题】：Unattach a JQuery drag and drop item from an area without deleting or hiding it从区域中取消附加 JQuery 拖放项目而不删除或隐藏它
【发布时间】：2019-11-15 19:46:44
【问题描述】：

我正在做一个项目，该项目需要我将 div 移动到一个区域中，让它们调整自己的大小以适应该区域的大小，然后捕捉到该区域。

我遇到的问题是，当底部项目从该区域中移除时，它们会“跳”到屏幕上，就好像它们正在补偿其他项目占用的区域一样。我知道这不是一个好的描述，所以我有一个 JSfiddle。

要复制，将 2 个项目放入右侧区域，然后移除底部的一个。当您将其带出该区域时，您当前持有的物品将在屏幕上向上移动。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Creator</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    </head>

    <body>
        <div class="drag-area">
            <div id="snaptarget" class="ui-widget-header">
            </div>

            <br style="clear:both">

            <div id="draggable" class="draggable ui-widget-content">
                <p>A</p>
            </div>

            <div id="draggable2" class="draggable ui-widget-content">
                <p>B</p>
            </div>

            <div id="draggable3" class="draggable ui-widget-content">
                <p>C</p>
            </div>

            <div id="draggable4" class="draggable ui-widget-content">
                <p>D</p>
            </div>

            <div id="draggable5" class="draggable ui-widget-content">
                <p>E</p>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

CSS：

.drag-area {
  min-height: 100vh;
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 150px auto;
}

.draggable {
    grid-column: 1;
    grid-row: 1;
  width: 80px;
  height: 80px;
  display: inline-block;
  margin: 0 10px 10px 0;
  font-size: .9em;
}

.ui-widget-header p,
.ui-widget-content p {
  margin: 0;
}

#snaptarget {
  width: 173px;
    height: 100vh;
    grid-column: 3;
  position: relative;
}

jQuery/JS：

$(function() {
  $(".draggable").draggable();
    $(".draggable").resizable();
  $("#snaptarget").droppable({
    accept: ".draggable",
    drop: function(e, ui) { //use add class to add tabs maybe?
        var $item = ui.draggable;
        $item.appendTo($(this)).css({
            margin: 0,
            position: "relative",
            top: 0 + "px",
            left: 0 + "px",
            width: $(this).width() + "px"
        });
    },
    out: function(e, ui){
        var $item = ui.draggable;
        var position = $item.offset();
        var x = position.left;
        var y = position.top;
        $item.css({
            position: "absolute",
            top: y + "px",
            left: x + "px"
        });
    }
  });
});

JSFiddle：https://jsfiddle.net/9pk6zt5a/

问题似乎是每个项目在连接时计算它相对于该区域的 x 和 y 位置，这是我想要做的以便它捕捉到顶部。将其拖出会将其位置更改为绝对位置，以防止其干扰该区域中的其他项目。

理想情况下，解决此问题的最佳方法是以某种方式将其分离，并在它连接到该区域之前将其恢复为原来的形式。我找不到这样做的方法。

我尝试通过使用偏移和更改定位来修复它，但都没有成功。

作为旁注，是否有更简单的方法来完成这样的反应？我不知道有什么反应，但我愿意了解这是否能让这变得不那么令人沮丧。

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

尝试通过将项目放回 .drag-area 来恢复该过程，类似于：

$(function () {
    $(".draggable").draggable();
    $(".draggable").resizable();

    // Make the area droppable so that you can drop back the items
    $('.drag-area').droppable({
        accept: ".draggable",
        drop: function (e, ui) {
            if(!ui.draggable.parents().first().hasClass('drag-area')){
                ui.draggable.appendTo($(this)).removeAttr('style');
            }
        }
    });

    $("#snaptarget").droppable({
        accept: ".draggable",
        drop: function (e, ui) { //use add class to add tabs maybe?
            var $item = ui.draggable;
            $item.appendTo($(this)).removeAttr('style').css({
                top: ui.offset.top + "px"
            });
        },
    });
});

https://jsfiddle.net/L932c0wr/7/

【讨论】：