jquery, przeciągalna i skalowalna obudowa

Question

Próbuję uczynić element div zarówno ponownie skalowalnym, jak i przeciągalnym za pomocą jquery. Jednak wdrożenie wydaje się być dość błędne.

Znalazłem kilka podobnych pytań, ale bez rozwiązania.

• In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?
• Resizing a JQuery Draggable element's containment parent while dragging

Próbowałem przy użyciu kilku position konfiguracje i Próbowaliśmy także opcję refreshPositions , nic nie działało.

Błędy doświadczam:

• Podczas przenoszenia elementu dziecko szybko (w szczególności, gdy porusza się w kręgach), często łamie i pozostaje poza skażenia.
• Przenosząc dziecko w prawy dolny róg, a następnie próbując przeciągnąć dziecko poza rogiem, przeciągając je wielokrotnie, w każdej iteracji dziecko rozbija nieco osłonę nieco dalej
• Gdy zamknięcie jest zepsute, w następnym przeciągnij, możesz także przeciągnąć do tego obszaru z pękniętym pojemnikiem

Zminimalizowałem przykład.
To jest powtarzalne we wszystkich przeglądarkach, wszystkie jednak wydają się łamać w IE 10 i operze.

$(".child") 
    .draggable({ 
    containment: "parent", 
    cursor: "move" 
}).resizable({ 
    handles: "s,e", 
    containment: "parent", 
    minHeight: 50, 
    minWidth: 50 
}); 

Zobacz tutaj pełny, ale prosty przykład.

http://jsfiddle.net/jxY8M/

Jak mogę rozwiązać ten problem hermetyczności?

Answer 1

To problem z interfejsu Draggable sama kwestia zostały już zgłoszone here

Poprawki w danym przypadku są (przynajmniej w najnowszej wersji Chrome, która pracuję nad) do

1. Dodaj 5px padding do rodzica, demo found here
2. Dodaj 5px border do rodzica, demo found here
3. Dodaj 5px margin do dziecka, demo found here
4. Mieszanie którekolwiek z powyższych dla podwyższenia 5px
5. Dodaj overflow:hidden do rodzica, demo found here. Nie mam pojęcia, dlaczego ten działa, ale wygląda na to, że działa idealnie

Próg 5p może być tylko adekwatny do przykładu, może być konieczne trochę gry, aby uzyskać poprawną wartość w twoim przypadku . Niektóre inne przykłady, które widziałem, wymagały mniejszego wypełnienia lub szerokości obramowania, przypuszczam, że jest to oparte na tym, jak duże są elementy, ale nie jestem pewien.Testowałem piąte rozwiązanie w ich przykładach i wydawało się, że działa tam również

Answer 2

Możesz spróbować użyć funkcji zatrzymania w interakcji przeciągalnej, aby zmienić parametry zmiany rozmiaru. Pomogło mi to, gdy miałem podobne problemy podczas ustawiania mechanizmu powstrzymywania w obu interakcjach skalowalnych i przeciągalnych.

Uwaga: działa to również z zablokowanym współczynnikiem kształtu w interakcji skalowalnej.

próbki:

<div id="container" style="width: 320px; height: 240px; background-color: #000000;"> 
    <div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;"> 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 
jQuery(document).ready(function() { 
    jQuery("#subject").resizable(
    { 
     aspectRatio: 4/3, 
     minHeight: 120, 
     minWidth: 160, 
     maxHeight: 240, 
     maxWidth: 320 
    }).draggable(
    { 
     containment: "#container", 
     stop: function(evt, ui) { 
      var container = jQuery("#container"); 
      var subject = jQuery("#subject"); 

      var containerPosition = container.position(); 
      var subjectPosition = subject.position(); 

      var relativeLeft = subjectPosition.left - containerPosition.left; 
      var relativeTop = subjectPosition.top - containerPosition.top; 

      var maxWidth = (container.width() - relativeLeft) | 0; 
      var maxHeight = (container.height() - relativeTop) | 0; 

      subject.resizable("option", "maxWidth", maxWidth); 
      subject.resizable("option", "maxHeight", maxHeight); 
     } 
    }); 
}); 
</script> 

Answer 3

In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously? jest zamknięty, ale rozwiązanie tego problemu jest:

dodać position:relative macierzystej/pojemnika.

overflow:hidden nie działa dla mnie (w Firefoksie, nie testowane jeszcze innych przeglądarek)