Ограниченный перетаскиваемый элемент с деталями - PullRequest
Новая
       7

Ограниченный перетаскиваемый элемент с деталями

0 голосов
/ 03 февраля 2019

Я пытаюсь сделать элемент div перетаскиваемым и привязанным к другому элементу контейнера (светло-желтый).Используя jquery и jquery-UI, мне удалось заставить его работать (кодовый проект здесь ).Теперь я пропускаю следующий шаг.

У меня есть (красная) кнопка на моем перетаскиваемом элементе заголовка, который переключает видимость элемента div, содержащего некоторые другие детали.Я также хочу, чтобы эти данные всегда отображались в моем контейнере.

Прямо сейчас, если я перетащу свой (оранжевый) div заголовка на нижнюю часть его контейнера и открою div body details (gold), он появится вне контейнера,Есть ли способ избежать этого, учитывая, что я хочу иметь возможность перетаскивать мой заголовок вверх по дну контейнера?я думал о чем-то вроде 

if(spaceUnderHeaderDiv < detailsDivHeight) { 
  // make detailsDiv to appear on the top of header instead 
}

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

1 Ответ

0 голосов
/ 04 февраля 2019

Я надеялся, что .toggle() с slide и определенными параметрами будут работать. 

$(".elBody").toggle("slide", {
  direction: "down",
  distance: diff
});

Где diff - это разница в пикселях от нижнего края .elHeader до нижнегокрай .container.Этот эффект пользовательского интерфейса jQuery работает иначе, чем jQuery .slidetoggle().

То, что я закончил, было похоже, я настроил значение height перед выдачей .slideToggle().

Рабочий пример: https://jsfiddle.net/Twisty/9q5wt186/13/

JavaScript 

$(function() {
  function detEdgeDiff(el) {
    var par = el.parent();
    var head = $(".elHeader", el);
    // Calc expected bottom
    var elBottom =  el.position().top + head.height() + 200;
    // Calc bottom edge + Margin of Parent
    var parBottom = par.position().top + par.height() + 20;
    // Default height
    var results = 200;
    if (elBottom > parBottom) {
      var diff = Math.round(elBottom - parBottom);
      results = 200 - diff;
    }
    return results;
  }
  var $element = $(".element");
  $element.draggable({
    containment: ".container",
    handle: ".elHeader"
  });

  $(".expand").on("click", function(e) {
    var d = detEdgeDiff($element);
    $(".elBody").css("height", d + "px").slideToggle();
  });
});

Надеюсь, что поможет.

...