Jak mogę się upewnić, że przeciągnięty element zachowuje szerokość oryginału?

Question

Używam przeciągnięcia JQuery UI do przeciągnięcia <div>, którego szerokość jest obliczana jako część układu (margin:auto;).

Podczas przeciągania tego elementu przy użyciu helper:clone klon otrzymuje również styl margin:auto;, ale nie jest już ograniczony przez kontener oryginału.

Wynik: Sklonowana <div> może mieć inną szerokość niż oryginał.

Fiddle: http://jsfiddle.net/ericjohannsen/ajpVS/1/

Jak mogę spowodować klona do zachowania oryginału szerokość?

Answer 1

Trzeba tylko ustawić szerokość i margines na sklonowanego elementu opartego na Draggable obiektu, gdy zostanie upuszczony, używając $(ui.draggable).clone().css({ ... });

Oto zaktualizowana skrzypce dla ciebie, powinno być to, czego szukasz. Zachowa także szerokość dla obiektu pomocnika. http://jsfiddle.net/ajpVS/2/

Answer 2

Chyba wiem w czym jest problem .. gdzie trzeba:

<div style="width:50px"> 

też musi to być ujęte w klasie objectDrag:

<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div> 

Mam nadzieję, że to co masz na myśli!

EDIT:

Witam raz jeszcze okiem http://jsfiddle.net/He2KZ/1/

użyłem szerokość: dziedziczenia własności dziedziczyć rodziców szerokość bez względu na rozmiar jest. Zauważyłem też, że usunięcie granicy naprawiło problem. Klon doczepny ma 2 piksele, a ty masz granicę 1 piksela. To trochę buggy z JQuery-ui IMO powinny przynajmniej uwzględniać granice.

Jeśli naprawdę chcesz ramek, spróbuj użyć "konspektu" zamiast "obramowania". To nie dodaje do szerokości div.

Answer 3

Odpowiedź Jona jest naprawdę dobra, ale nie działa poprawnie, gdy w elemencie potomnym znajdują się elementy przeciągalne. Kiedy to bywa, event.target może reprezentować dzieci Państwa Draggable, a którą chcesz zmodyfikować Draggable za helper() metoda coś takiego:

$(".objectDrag").draggable({ 
    helper: function(e) { 
    var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable"); 
    return original.clone().css({ 
     width: original.width() // or outerWidth* 
    });     
    }, 
    ... 
}); 

Without this, pomocnik będzie reprezentować dowolny element podrzędny kliknięciu w ramach przeciągany (kliknij w jasnoniebieskim regionie w polu "Przeciągnij 1" na przykład). Adding the additional logic above zapewnia, że ​​element przeciągalny jest używany dla helpera. Mam nadzieję, że pomaga każdemu w podobnej sytuacji!

---

* Uwaga: Będziemy chcieli wykorzystać outerWidth jeśli oryginalny element ma box-sizing: border-box Stosowanej (dzięki @ jave.web do podnoszenia).