jquery ui->拖动后切换可拖动div->其他div移动

Question

我使用jquery ui构建一种仪表板。

此仪表板包含各种div，它们的作用类似于“窗口”：可以将其最小化，拖动和最大化。

到目前为止，除以下行为外，一切正常。

在页面的初始开始，窗口1位于窗口2上方。当我将窗口2拖动到窗口1的右侧，然后最小化窗口1时，窗口2移出屏幕。似乎在拖动后div的顺序仍然保留。

这里是一个jsfiddle：https://jsfiddle.net/453a1dh7/3/

$('[id^=widget]').draggable({
    snap: true,
    grid: [20, 20]
});
// Widgets skalierbar machen
$('[id^=widget]').resizable({
    snap: true,
    grid: [20, 20]
});

// Widget minimieren
$(".w_minimize").click(function() { 
$(this).closest(".ui-widget-content").find(".body_widget").toggle();
});

请将窗口2移至窗口1的右侧，然后通过按按钮最小化窗口1。

[有没有一种方法可以“取消链接”窗口，以便我可以将它们拖放到我想要的任何位置，并且最小化不会影响其他div的位置。

Answer 1

作为解决方法，如果将绝对位置设置为第二个元素呢？

div#widget_2 {
 position: absolute !important
}

Answer 2

您将需要调整stop中的位置，以使其不使用与其他元素的相对位置。

小提琴：https://jsfiddle.net/Twisty/1x9dfa0e/12/

JavaScript

$(function() {
  $('[id^=widget]').draggable({
    snap: true,
    grid: [20, 20],
    container: ".ui-widget",
    stop: function(e, ui) {
      console.log(ui.position, ui.offset);
      ui.helper.css({
        position: "absolute",
        left: ui.offset.left + "px",
        top: ui.offset.top + "px"
      });
    }
  });
  // Widgets skalierbar machen
  $('[id^=widget]').resizable({
    snap: true,
    grid: [20, 20]
  });
  // Widget minimieren
  $(".w_minimize").click(function() {
    $(this).closest(".ui-widget-content").find(".body_widget").toggle();
  });
});

我添加了一个容器来帮助定位。