jquery ui -> переключение перетаскиваемого div после перетаскивания -> другие перемещения div - PullRequest
Новая
       52

jquery ui -> переключение перетаскиваемого div после перетаскивания -> другие перемещения div

1 голос
/ 28 января 2020

Я использую jquery пользовательский интерфейс для создания своего рода приборной панели.

Эта приборная панель содержит различные элементы div, которые должны действовать как "windows": их можно свернуть, перетащить и развернуть.

Пока все работает нормально, за исключением следующего поведения:

При первоначальном запуске страницы окно 1 располагается над окном 2. Когда я перетаскиваю окно 2 справа от окна 1, а затем сверну окно 1 окно 2 выходит за пределы экрана. Кажется, что порядок деления все еще остается после перетаскивания.

Вот 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, нажав кнопку.

Есть ли способ «отсоединить» windows, чтобы я мог перетаскивать их куда угодно и минимизация не влияет на положение другие div.

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Вы хотите отрегулировать положение в пределах stop, чтобы оно не использовало относительное положение для других элементов.

Fiddle: 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();
  });
});

Я добавил контейнер, чтобы помочь с позиционированием.

0 голосов
/ 28 января 2020

Как насчет обходного пути, если вы установите абсолютную позицию для второго элемента? 

div#widget_2 {
 position: absolute !important
}
...