title: How can I save dragged & dropped elements VALUE after dropped all players (soccer manager)
body: <p>i have a player soccer field and i want the user to create his own LineUp via Drag and Drop...</p>
  
  <p>have a look at my fiddle: <a href="https://jsfiddle.net/ahsce0oj/2/" rel="nofollow">https://jsfiddle.net/ahsce0oj/2/</a></p>
  
  <p>this is my js code and my fiddle:</p>
  
  <pre><code>$(function() {
      $("#draggable2").draggable({            
          appendTo: "body",
          cursorAt: {
              cursor: "move",
              top: 5,
              left: 0
          },
          helper: function(event) {
              return $("&lt;img width='5%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'&gt;");
          }
      });
  
      $("#droppable2").droppable({
          accept: "#draggable2",
          classes: {
              "ui-droppable-active": "ui-state-default"
          },
          drop: function(event, ui) {
              $(this).find("p").html("&lt;img width='100%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'&gt;");
          }
      });
  });
  </code></pre>
  
  <p>(there is only one position at the moment, just a test)
  ----> You have to move the Text (right side) into the rectangle (mean position of my goalkeeper)</p>
  
  <p>but when i have my eleven positions and the "user" is done with his line up draft, how can I save his selection?</p>
  
  <p>with IDs? or every time directly after he dropped an element?</p>
  
  <p>thanks for any hints</p>
  
  <p>Edit: I would be really happy for any other hints how could I delete a dropped player (--> manipulate the DOM—for example delete his shirt and write "GOALKEPPER" instead into a DIV or a <code>&lt;p&gt;</code> Element)</p>