[jQuery] sortable() + textEditor, podczas sortowania - dezaktywuje sie textarea Opcje

[matird]

Witajcie,

Mam bardzo poważny problem - siedzę nad jego rozwiązaniem już ponad 2 dni i nic :/

Nie chcę zanudzać opisami o co chodzi, więc proszę przekonajcie się sami:

http://homebooker.com.pl/test2/

do pewnego momentu wszystko działa - ale kilka razy poprzenoście elementy i pola przestaną być aktywne... :/
Przejrzałem całą dokumentację sortable(), droppable() i draggable() i nic nie wymyśliłem.
Mam nadzieję, że ktoś z Was miał podobny przypadek i coś doradzi.

Będę aktywnie udzielał się w temacie więc śmiało zadawajcie pytania jeśli coś będzie niejasne.

Z góry naprawdę wielkie dzięki za pomoc / dobre chęci !

P.S. - tak wiem, przy przenoszeniu czyści się zawartość - ale to tylko dla testów (nowy init sie robi)

pozdrawiam

Rozwiązanie problemu:

Samemu sobie odpowiem na pytanie - mam nadzieję, że przyda się to komuś jeszcze.

Rozwiązanie nie jest trywialne i zajęło mi dwa dni bez przerw na sen:D

A więc to co udało mi się wyczytać:

"This is due to iframe management : when you move an iframe in the DOM, then it's content disapears."

Biorąc to pod uwagę należy w momencie rozpoczęcia 'drag' wyłączyć kontrole TinyMCE poprzez np:

[HTML] pobierz, plaintext 
tinyMCE.execCommand("mceRemoveControl", false, ID_ELEMENTU);
[HTML] pobierz, plaintext 

A tuż po opuszczeniu, albo zakończeniu akcji 'drag' przywrócić kontrolę:

[HTML] pobierz, plaintext 
tinyMCE.execCommand("mceAddControl", false, ID_ELEMENTU);
[HTML] pobierz, plaintext 

Należy też pamiętać, że ID muszą być generowane różne, natomiast do określonego ID widgeta można się dostać za pomocą:

[HTML] pobierz, plaintext 
temp_ID = ui.item.find('textarea').attr('name');
[HTML] pobierz, plaintext 

- obiekt ui.item to jest ten który aktualnie jest sortowany

do powyższego kodu należy dodać, że aby korzystać z obiektów jQuery ui należy w arg funkcji dodać (event,ui)

Eventsy, do których trzeba przypisać te akcje to: start i stop (oczywiście w sortable())

mniej więcej powinno wyglądać to tak:

[HTML] pobierz, plaintext 
sortable({
			//items: "li:not(.placeholder)",
		            placeholder: "ui-state-highlight1",
		            //items: 'li',
		            //handle:'.handle',
		            cancel: ':input,button',
		            start: function(event,ui){
			  temp_name = ui.item.find('textarea').attr('name');
			  if(temp_name){
			  tinyMCE.execCommand("mceRemoveControl", false, temp_name);
			  }else{
			  ui.item.find('#editor').html('<textarea id="elm'+i+'" name="elm'+i+'" style="width:100%"></textarea>');
			     tinyMCE.init({
			     // General options
			          //mode : "exact",
			          elements : "elm"+i+"",
			          theme : "advanced"
 
    });
			  tinyMCE.execCommand("mceRemoveControl", false, 'elm'+i);
			  i++;
			  }
		            },
		            receive: function(event, ui) {
		            },
		            stop: function(event,ui){
			  if(ui.item.children('span').text() == "Tekst"){
			  var temp_name = ui.item.find('textarea').attr('name');
			  tinyMCE.execCommand("mceAddControl", false, temp_name);
				}
		            }
		});
[HTML] pobierz, plaintext 

W tym wypadku wszystko powinno działać PRAWIE dobrze Nie powinno działać tylko pierwsze sortowanie - pierwszy element który położymy. Dlaczego ? nie mam pojęcia, może ktoś będzie mądrzejszy ode mnie i to wyjaśni, natomiast rozwiązanie jest bardzo proste:

[HTML] pobierz, plaintext 
//mode : "exact",
[HTML] pobierz, plaintext 

- zakomentować to cholerstwo, przez które wasz kolega z forum stracił 2dni !:)

Na koniec dodam, że " tinyMCE.execCommand("mceAddControl", false, temp_name);" podobno (nie sprawdzałem w dokumentacji) nie działają dla TinyMCE przyjaznego dla jQuery - działają na tym zwykłym.

Ten post edytował matird 22.07.2011, 22:30:29