hack dla jQuery do serializacji wartości <input> i <select> elementów, które NIE są wewnątrz formularza

Question

Przeglądałem wiele postów na temat stackoverflow i gdzie indziej dla tej odpowiedzi, ale wciąż walczę, aby znaleźć coś, co będzie działać z granice mojej aplikacji.

Buduję od istniejącej wtyczki (http://johnny.github.com/jquery-sortable/), aby utworzyć edytor html typu "przeciągnij i upuść" dla elementarnych uczniów. Ta wtyczka używa jQuery do serializowania danych wyjściowych do formatu przypominającego kod źródłowy HTML, który w konsekwencji automatycznie aktualizuje okno podglądu strony internetowej. Rozstępy z funkcją contenteditable działają dobrze, umożliwiając użytkownikom wprowadzanie wartości bez przypadkowej edycji samych tagów HTML.

Jednak nie mogę uzyskać wartości wejścia ani wybrać elementów, które mają być włączone do seryjnego wyjścia. Po przejrzeniu interfejsu API jQuery w celu serializacji wydaje się, że elementy> input> < muszą znajdować się wewnątrz formularza i mieć również atrybut name. Nie jest to coś, co będzie działało z charakterem mojego projektu, dlatego szukam hack/obejścia.

Jeśli ktoś jest świadomy hack, aby upewnić się, że dane wejściowe i wybrane wartości elementów są zawarte w seryjnym wyjściu, byłbym bardzo wdzięczny!

Edycja: Tutaj znajduje się link do najbardziej aktualnego stanu demo, na którym mógłbym go uzyskać: http://tinker.io/5bdab/5. Po wypróbowaniu kilku miejsc, aby umieścić mój kod (jsbin, tinkerbin, jsfiddle), wydaje się, że wszystkie mają problemy z wyświetlaniem elementu iframe? Nie widzisz więc niesamowitego faktu, że przeciąganie i upuszczanie elementów w środkowej kolumnie skutkuje zmianą podglądu na żywo html obok ... Jednak nadal możesz zobaczyć, że wyniki w wygenerowanym kodzie źródłowym zmieniony przez serializację (część, której potrzebuję pomocy w ustaleniu, jak serializować dane wejściowe i wybrać elementy, aby ich wartości pojawiły się w obszarze tekstowym).

Jednak cały plik znajduje się w sekcji HTML (dla wygody dla takich instancji, a nie dla standardowej praktyki), ponieważ łączę się z zewnętrznymi plikami js i zdefiniowałem wewnętrzny styl - jeśli byłeś tak pochłonięty, może po prostu zapisać plik html na komputerze i go wypróbować. Nie znam lepszej opcji wyświetlania demo na żywo z obsługiwanych iframe:/

Answer 1

Spróbuj zawijania wszystkich treści wewnątrz div

<div id="wrapper"> 
    <input type="text" value="text text" name="text"> <br> 
    <select name="single"> 
     <option>Single</option> 
     <option>Single2</option> 
    </select> 
    <textarea name="textarea">textarea text</textarea> 
</div> 

a następnie serializować wszystkich elementów wewnątrz tego div

$("#wrapper").find("select,textarea, input").serialize(); 

Demo