Question

我正在尝试创建一个可放置的网格作为图标网格。我们的想法是创建已经删除的可拖动图标。

我无法创建已经丢弃的拖动，所以我模仿掉落并将droppable设置为禁用，但它有一些东西。

它正在工作，但由于我创建了所有的draggables和droppables然后模仿了drop，因此使用页面中的大量空间在列表中创建了drag元素。在它们被删除之后，用过的空间仍然留在页面中。

我想要的是能够在单个空间（堆叠）中创建所有可拖动元素，因此我可以将其移动到我想要的位置而无需额外的空间。

这是我的完整代码：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="jquery-ui.css" rel="stylesheet">
    <style>
    body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 50px;
    }
    .demoHeaders {
        margin-top: 2em;
    }
    #dialog-link {
        padding: .4em 1em .4em 20px;
        text-decoration: none;
        position: relative;
    }
    #dialog-link span.ui-icon {
        margin: 0 5px 0 0;
        position: absolute;
        left: .2em;
        top: 50%;
        margin-top: -8px;
    }
    .draggable { width: 100px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0;}
    .droppable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #mainContainer {width: 1220px; height: 300px; padding: 0.5em; margin: 10px 10px 10px 0; background : gray;}
    .dragContainer {width: 1220px; height: 120px;}
    </style>
</head>
<body>

<h1>Welcome to jQuery UI!</h1>

<div class="dragContainer">
    <div id="set">
    </div>
</div>

<div id="mainContainer">

</div>

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
var dropGrid = [];

$(function() {  
    var l = 20;
    while(l--) {
        $("#mainContainer").append("<div id=\"droppable"+l+"\" class=\"ui-widget-content droppable\"><p>Drop here</p></div>");
        $( "#droppable"+l ).droppable({
            drop: function( event, ui ) {
                ui.draggable.offset({top : $(this).offset().top, left : $(this).offset().left});
                $( this ).droppable({ disabled: true });
                var old = dropGrid[$(ui.draggable).attr("id")];
                console.log("OLD: " + old);
                if(old) {
                    console.log("ENABLING");
                    $("#"+old).droppable('option', 'disabled', false);
                }
                dropGrid[$(ui.draggable).attr("id")] = $(this).attr("id");
                console.log("TEST: " + dropGrid[$(ui.draggable).attr("id")]);
            }
        });
        $( "#droppable"+l ).droppable({ hoverClass: "ui-widget-header" });
    }

    l = 15;
    while(l--) {
        $("#set").append("<div id=\"draggable"+l+"\" class=\"ui-state-highlight draggable\"><p>Drag me to my target</p></div>");
    }

    $( "#set div" ).draggable({ 
        stack: "#set div",
        revert : "invalid",
        cursor : "move"
    });

    $("#draggable3").offset({top : $("#droppable15").offset().top, left : $("#droppable15").offset().left});
    dropGrid["draggable3"] = "droppable15";
    $( "#droppable15" ).droppable({ disabled: true });

    $("#draggable4").offset({top : $("#droppable18").offset().top, left : $("#droppable18").offset().left});
    dropGrid["draggable4"] = "droppable18";
    $( "#droppable18" ).droppable({ disabled: true });

});
</script>
</body>
</html>

Answer 1

您可以应用position:absolute以便元素重叠而不是占用ui中的单个空格。应用

#set div{
  position:absolute;
  top:80px;
  left:80px;
}

如何创建堆叠在同一位置的JQueryUI Draggable？

1 个答案:

Demo