时间戳

首页 > 解决方案 > jquery ui --> 拖动后切换可拖动的 div --> 其他 div 移动

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

问题描述

我使用 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 的位置。

标签： jquery-uitoggledrag

解决方案

您将需要调整其中的位置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();
  });
});

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

推荐阅读