Drag and Drop dla wiadomości

Cześć wszystkim.

Jestem w trakcie tworzenia dla siebie (uczę się) strony www. Utworzyłem "Wiadomości prywatne" i pomyślałem, że fajnym, na pewno rozwijającym pomysłem byłoby aby wczytywać wiadomości systemem drag and drop.

Póki co wszystko działa, bo przeciągając wiadomość w oknie drop zostaje autor, treść i data wysłania wiadomości. Treraz męczę się, aby poszczególne elementy były wczytywane do różnych divów.
Taki efekt chcę uzyskać

Taki efekt mam

Kod JS:

function setBackground(jQObject, color) {
  jQObject.css("background-color", color);
}
function blink(jQueryObject) {
  var origColor = jQueryObject.css("background-color");

  var baseDelay = 50;
    for(var i = 0; i <= 4; i+=2) {
      setTimeout(setBackground, baseDelay*i, jQueryObject, "white");
      setTimeout(setBackground, baseDelay*i+50, jQueryObject, origColor);
    }
}

$(document).ready(function() {

  $(".draggable").draggable({
        revert: true,
        // helper: "clone",
        cursor: "move",
        drag: function(event,ui){
          var $helper = ui.helper;
          $($helper).removeClass("selected");
          var $selected = $(".selected"); 
          if($selected.length > 1){ 
            $($helper).html($selected.length + " items");
          }                   
        }
       });

  function moveItem($item) {
        $item.fadeOut(function() {
          $item.find(".item").remove();         
        });
      }


  $(".item").click(function(){
        $(this).toggleClass("selected");
      });

  
  $("#droppable").droppable({
    activeClass: "active",

    drop: function (event, ui) {
      blink($(this));
      $(this).html(ui.draggable.text());
    }

  });

   
});

#droppable {
    position: absolute;
    left: 10px;
    width: 100%;
    height: 500px;
    background: white;
    color: black;
    padding: 10px;
    border: 0.5px dashed #999;  
}
    #zdjecie{
      position: absolute;
    left: 10px;
    width: 20%;
    height: 150px;
    /*background: white;*/
    color: black;
    padding: 10px;
    border: 0.5px dashed #999; 
    }
     #inst{
      position: absolute;
    margin-top: -190px;
    left: 400px;
    width: 250px;
    height: 150px;
    /*background: white;*/
    color: black;
    padding: 10px;
    /*border: 0.5px dashed #999; */
    }
    #tytul{
    position: relative;
    margin-top: -20px;
    left: 165px;
    width: 200px;
    height: 30px;
    /*background: white;*/
    color: black;
    padding: 10px;
    border: 0.5px dashed #999; 
    }
    #tresc{
    position: absolute;
    margin-left: -150px;
    /*margin-top: -20px;*/
    left: 10px;
    width: 685px;
    height: 300px;
    /*background: white;*/
    color: black;
    padding: 10px;
    border: 0.5px dashed #999; 
    }
    .item{
            /*min-width:365px;*/
            background-color: #FBFBFB;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 15px;
            border-style: solid;
            border-color: #F0F0F0;
            border-width: 0px 0px 2px 0px;
            z-index: 300;
    }
    .selected{
      background-color:#ff9900;
    }
    .list{
      height: 100%; 
      overflow: auto;
    }

printf("<div class='item draggable'>
                          <ul  class='list-unstyled msg_list'>                      
                            <li>                          
                               <a href='#'>
                               <div>                                                                  
                              <span class='image'><img src='avatar/".$zdjecie."'/></span> 
                              <span>
                                <span>".$od."</span><br />
                                <span class='time'>".$dataWyslania."</span>
                              </span>
                              <span class='message'>".$wiadomosc."</span>                                                  
                              </div>                                           
                            </a>                                                                                   
                          </li>                    
                         </ul>
                       </div>");

Z góry dziękuję wszystkim za pomoc i tez z góry przepraszam za błędy w kodzie, jeżeli są ;)
Pomóżcie uczącemu się koledze ;)

wczytywać wiadomości systemem drag and drop.

Wczytywać dokąd? I skąd (skoro to drag and drop)?

przeciągając wiadomość w oknie drop zostaje autor, treść i data wysłania wiadomości

Przeciągając skąd dokąd? Po zrzutach ekranu nie bardzo widzę.

Cześć,

Dziękuję za zainteresowanie tematem.

Wczytywać to może duże słowo, po prostu z lewego diva, przeciągając wiadomość do prawego diva chcę osiągnąć efekt jak na pierwszym zrzucie ekranu, a do tej pory mam taki efekt jak na drugim.

Wczytywać to może duże słowo, po prostu z lewego diva, przeciągając wiadomość do prawego diva chcę osiągnąć efekt jak na pierwszym zrzucie ekranu, a do tej pory mam taki efekt jak na drugim.

A nie masz przypadkiem na myśli przeciągania z prawego elementu div do lewego? Wtedy miałoby to dla mnie więcej sensu na zrzutach. Na pierwszym zrzucie po prawej stronie widzę listę wiadomości (z jednym elementem?), a po lewej panel odczytu wiadomości z trzema elementami i jakąś łapką z kartką (ale bez wyróżnionego m.in. pola autora). Na drugim zrzucie po prawej nic się nie zmienia, a po lewej wcześniejszy panel znika i pojawia się panel z jednym polem – na treść wiadomości. Dobrze rozumiem?

Tak mam na myśli przeciąganie, i zależy mi na tym, aby po przeciągnięciu elementu z prawego divu do lewego uzyskać efekt jak na zrzucie nr 1. Zrzut nr 2 pokazuje jaki efekt mam na teraz po przeciągnięciu elementu

Tak patrząc jeszcze bez uruchamiania, w mojej opinii problem leży w tej linijce:

$(this).html(ui.draggable.text());

Tutaj mówisz, żeby Javascript zastąpił zawartość HTML obiektu jQuery wartością zwróconą z metody text obiektu ui.draggable.

Powiem Ci, że też mocno zwracałem na to uwagę, ale co bym tam nie zmieniał to przestaje działać cały mechanizm

Zamiast metody html spróbuj użyć na przykład append z takim samym argumentem. Jak zadziała, będzie można dalej myśleć.

append nie zastępuje zawartości Diva co w efekcie przeciągnięcia kilku wiadomości nakłada jedną na drugą

Tak, ale chodziło mi o to, czy zadziała. Jeśli tak, będziesz mógł wybrać bardziej szczegółowy element – nie nadrzędny, a podrzędny, może właśnie pole tekstowe czy coś. I wtedy będziesz mógł dla tego elementu zamienić zawartość funkcją html. Jeśli znów zadziałałoby, to trzecim krokiem byłoby oddzielenie daty od treści i przekazywanie ich do dwóch odzielnych elementów. Nie wiem, czy jasno się wyraziłem.

Okay, rozumiem, to append działa, nie zastępuje zawartości html, tylko tak jakby dorzuca do tego co jest.

I teraz nie łap wartości this w wyrażeniu $(this), tylko wpisz tam ID tego dużego pola tekstowego (nie podałeś całego kodu HTML, więc nie wiem, jakie ma).

 <div id="droppable"  class="block_content"> <!-- Duże pole  -->
                            <div id="zdjecie">  <!-- avatar  -->
                            <img src="avatar/newavatar.png">
                            <div id="tytul">   <!-- Tytuł  -->
                              <p><i>Data wysłania wiadomości</i></p><br />
                              <div id="tresc"> <!-- Treść  -->
                                <center><i>Treść wiadomości</i></center>
                                <div id="inst">                                  
                                  <img src="avatar/drop.png" style="width: 200px; margin-top: -40px; margin-left: 120px; height: 150px; -webkit-transform: scaleX(-1);
    transform: scaleX(-1);">

                                </div>
                              </div>
                            </div>
                            </div>                            
                          </div>

Wpisałem, nic się nie zmieniło jeszcze :)

Wpisałem, nic się nie zmieniło jeszcze :)

Czy linijka wygląda u ciebie tak: $("#inst").html(ui.draggable.text());? W którym miejscu powyższego HTML-a dodaje się teraz tekst?

$("tresc").html(ui.draggable.text());

Wyświetla się w dobrze, w okienku treść wiadomości. Teraz zostało nam rozdzielić poszczególne elementy. Nie wiem, ale domyślam się że trzeba będzie pozamieniać this na id elementów?

Zamiast draggable.text() musisz jakoś pobrać z obiektu ui.draggable poszczególne elementy (ich zawartość to nie problem). Może spróbuj find. Na przykład: html(ui.draggable.find(".time").text());.

 $("#tresc").html(ui.draggable.find(".message").text());

W tan sposób działa, wyświetla tylko treść wiadomości w divie wiadomości, natomiast jak zrobię tak:

      $("#tytul").html(ui.draggable.find(".time").text());
      $("#tresc").html(ui.draggable.find(".message").text());

To już nie działa

PS. nie działa w tym sensie, że dodaje tylko datę, a usuwa treść

Usuwa treść, ponieważ pobierasz nieodpowiedni element (dokładnie: element nadrzędny, kontener). Dodaj do elementu z datą gdzie ma iść data jakieś ID i pobieraj po tym ID. Na przykład: <p id="date"><i>Data wysłania wiadomości</i></p> oraz $("#date").html(ui.draggable.find(".time").text());.

Wszystko działa, jedynie jest problem jeszcze z wyświetlaniem avataru:

      $("#avatar1").html(ui.draggable.find(".image").text());

<img id="avatar1" src="avatar/newavatar.png">

text() pobiera wyłącznie zawartość tekstową. Nie bardzo wiem, jak przenieść obrazy. Niemniej znalazłem taki przykład: https://www.aspsnippets.com/Articles/Drag-and-Drop-images-from-one-DIV-to-another-using-jQuery.aspx. Autor robi to tak, że obraz jest oddzielnym elementem draggable.

UPDATE: Tak, po prostu przenosi cały element <img>:

...
$("#dvDest").append(ui.draggable);

gdzie draggable jest

$("#dvSource img").draggable({
    ...
});

$("#zdjecie").html(ui.draggable.find(".image"));

W ten sposób przenoszę tylko zdjęcie, reszta ginie

EDIT:
Ok wszystko działa. Złe id zdjęcia było.
Dziękuję bardzo za pomoc, dużo mi wyjaśniłeś dużo zrozumiałem :)