jQueryUI перетаскиваемая ручка с углами - PullRequest
Новая
       37

jQueryUI перетаскиваемая ручка с углами

0 голосов
/ 15 апреля 2020

Как сделать элемент перетаскиваемым с некоторыми ограничениями. Следует оставить с собой в коробке. Но родители имеют меньший размер от ребенка. Позвольте мне объяснить Вот игровая площадка 

new ScrollZoom($('.parent'),20,0.5)
    $('.child').draggable();
.parent {
      width: 400px;
      height: 400px;
      border: 1px solid;
      margin: auto;
    }
    .child {
      width: 380px;
      height: 380px;
      background: rgba(255, 0, 0, 0.1);
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://techeak.com/zoominout.js"></script>
    <div class="parent">
      <div class="child">
        
      </div>
    </div>

Левый угол дочернего элемента должен соответствовать левому углу родительского элемента. enter image description here

И прямо с правом родителя. enter image description here

И то же самое с верхним основанием.

PS: прокрутите вверх дочерний элемент, чтобы уменьшить масштаб Я пытаюсь закодировать функцию, подобную этой https://zegami.com/collections/public-5d7d31a84a1e710001f3a1c8?pan=FILTERS_PANEL&view=grid

1 Ответ

0 голосов
/ 19 апреля 2020

Полагаю, вы пытаетесь создать своего рода Zoom Reticle. Используемый вами скрипт Zoom In Out не имеет хорошего способа t ie в события, когда объект масштабируется. Это делает получение масштаба немного сложнее. Это можно сделать, изучив CSS элемента child.

Используя эту шкалу, вы можете просто настроить перетаскиваемое удержание.

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

  • Селектор: Перетаскиваемый элемент будет содержаться в ограничительной рамке первого элемента, найденного селектором. Если элемент не найден, содержимое не будет установлено.
  • Элемент: Перетаскиваемый элемент будет содержаться в ограничительной рамке этого элемента.
  • String : Возможные значения: "parent", "document", "window".
  • Массив: Массив, определяющий ограничивающий прямоугольник в форме [ x1, y1, x2, y2 ].

Для этого фрагмента мы будем использовать формат Array для управления left и top child для содержания в пределах 4 границ. Это будет изменено всякий раз, когда child увеличено. Этот пример фокусируется на левой и правой защитной оболочке и может быть расширен для управления сверху и снизу. 

$(function() {
  function getBounds(tObj) {
    var t = tObj.position().top;
    var l = tObj.position().left + parseInt(tObj.css("margin-left"));
    var b = t + tObj.height();
    var r = l + tObj.width();
    return [l, t, r, b];
  }

  function getScale(tObj) {
    var c = tObj.css("transform");
    var p = c.split(", ");
    var s = parseFloat(p[3]);
    return s;
  }

  function calcCont(tObj) {
    var b = getBounds(tObj);
    var child = tObj.children()[0];
    var s = getScale($(child)) || 1;
    var n = [
      b[0],
      b[1],
      b[2],
      b[3]
    ];
    if (s > 1) {
      n[0] = b[2] - ($(child).width() * s);
      n[2] = b[0];
    }
    return n;
  }
  new ScrollZoom($('.parent'), 20, 0.5);
  $('.child').draggable({
    containment: calcCont($(".parent"))
  });
  $(".parent").on("mousewheel DOMMouseScroll", function(e) {
    $(".child").draggable("option", "containment", calcCont($(".parent")));
    return true;
  });
});
body {
  background: #222;
}

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid;
  margin: auto;
}

.child {
  width: 380px;
  height: 380px;
  background: rgba(255, 0, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://techeak.com/zoominout.js"></script>
<div class="parent">
  <div class="child">

  </div>
</div>
...