title: Create jQuery array of droppable elements
body: <p>I got draggable li - elements and droppable boxes - using jQuery UI.</p>
  
  <p>My structure:</p>
  
  <p><img src="https://i.stack.imgur.com/IMO1F.png" alt="enter image description here"></p>
  
  <p>A list of 3 permission types </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li data-action="create"&gt;Create&lt;/li&gt;
      &lt;li data-action="edit"&gt;Edit&lt;/li&gt;
      &lt;li data-action="delete"&gt;Delete&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And 3 areas to drop:</p>
  
  <pre><code>&lt;div class="row"&gt;
  
      &lt;div class="col-md-3 col-sm-6"&gt;
          &lt;h3&gt;Server&lt;/h3&gt;
          &lt;ul class="box" data-type="server"&gt;&lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3 col-sm-6"&gt;
          &lt;h3&gt;Games&lt;/h3&gt;
          &lt;ul class="box" data-type="games"&gt;&lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3 col-sm-6"&gt;
          &lt;h3&gt;User&lt;/h3&gt;
          &lt;ul class="box" data-type="user"&gt;&lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I added data-type and data-action attributes for better handling.
  My current jQuery code for draggable and droppable:</p>
  
  <pre><code>$("#rights &gt; ul &gt; li").draggable({
      appendTo: "body",
      helper: "clone"
  });
  
  $("#rights ul.box").droppable({
      activeClass: "helperclass",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
          $(this).find(".placeholder").remove();
          $("&lt;li&gt;&lt;/li&gt;").html(ui.draggable.text() + '&lt;span class="close"&gt;x&lt;/span&gt;').appendTo(this);
      }
  });
  
  $("#rights").on('click', '.close', function () {
      $(this).parent().slideUp(200, function() { $(this).remove(); } );
  });
  </code></pre>
  
  <p>This works perfect - but now i want to write the data in my MySQL DB.
  Perfect would be an array with strings like this:</p>
  
  <p><em>server[create], user[edit] etc</em></p>
  
  <p>So if submit i think i have to store all dropped elements in an array - but i don't know how to get them (then set it as value of hidden-field):</p>
  
  <pre><code>$('#userForm').submit(function() {
      $('#rights .box').each(function() {
          var currentBox = $(this).data('type');
          //Get all data-actions for this box 
      });
  });
  </code></pre>
  
  <p><strong>jsFiddle</strong>: <a href="http://jsfiddle.net/xw2djxdp/3/" rel="nofollow noreferrer">http://jsfiddle.net/xw2djxdp/3/</a></p>