Listedeki <li> Etiketlerini Canlı Olarak Gösterme!!

Arkadaşlar aşağıdaki linkteki örnekte iki adet liste sortable edilebilir halde.Bu listeyi html de nasıl liste şeklinde gösterebilirim? Yani adam değişiklik yaparken yan tarafta olacak olan listede olan elemanlarda yer değiştirsin.Anlatmak istediğimi aşağıdaki resimde gösterdim arkadaşlar.

Örneğe ait link bu: http://jsfiddle.net/fjjqM/1/

Yapmak İstediğim Şeye Ait Örnek Bu: http://www.lugolabs.com/lugoland/art...with-jquery-ui

Resim

Merhaba,

  $(function() {
      $('#sort1, #sort2').sortable({
          connectWith: ".sort",
          update: function( event, ui ) {
                                  $("#sonuc").html("");
                                         $("#sort1 li").each(function(){
                                     $("#sonuc").append($(this).text()+" ");  
                                   });
                                  
                                        }
      }).disableSelection();
      
  });

şeklinde bir update fonksiyonu ekleyebilir, yeni dizilimi alabilirsiniz.

Kolaylıklar.

Öncelikle teşekkür ederim hocam.Ama sonuc isimli bir div etiketi felan mı koymam gerekiyor.Bu kodu direkt js olarak eklediğimde birşey göremiyorum?

evet görsel olarak gönderdiğiniz yerde sonuçların çıkması için ul li bloklarınızdan sonra id'si sonuc olan bir nesne eklemeniz yeterli olur.
<div id="sonuc"></div> gibi.

kolaylıklar.

Çok teşekkür ederim,sayenizde oldu.Ama bu liste yan yana sıralanıyor.Tam bir liste gibi alt alta dizilmesini nasıl sağlayabilirim?

rica ederim.
o halde id'si sonuc olan div'i <ul id='sonuc'> </ul> şeklinde ul yapın ve
$("#sonuc").append($(this).text()+" ");
şunu
$("#sonuc").append("<li>"+$(this).text()+"</li>");
şeklinde değiştirin.

kolaylıklar.

Tekrardan merhaba hocam.Sayenizde yapmak istediğim herşeyi yapabildim ama jsfiddle daki projeyi locale aktaramıyorum.PC de çalışması için html dosyama hangi js dosyalarını dahil etmeliyim? Sitede sol tarafta direkt Jquery Uİ vs. seçiliyor ama bu ui nin hangi dosyalarını dahil edersem çalışır projem?

Son Hali:

https://jsfiddle.net/bcalbatros/weup03yw/7/

solda jquery ve ui kullandığınız için sadece jquery ui ve ui'nin css'ini atmanız yeterli olur.

en basitinden fiddle'da sağda çalışan alana sağ tıklayıp iframe'i görüntüle derseniz tüm gerekli dosyalara, nelerin çağırıldığına vs. erişebilirsiniz. ona göre düzenlemenizi yapabilirsiniz.

iframe'in içi : https://fiddle.jshell.net/bcalbatros/weup03yw/7/show/

kolaylıklar.

Hocam MUHTEŞEMSİNİZ!!