Drag and Drop serialize items

Question

I'm trying to make an exam application which has drag & drop question type that the user might dragging correct elements to correct droppable boxes. Totally, I need get dropped elements/items id's as array or another and insert to mysql with php. I did something are below:

Javascript

$(".dragging-items .draggable-item").draggable({ 
    helper: "clone",
    opacity: 0.5,
    scroll:true,
    refreshPositions: true,
    start: function( event, ui ) {
            (this).addClass("dragging");
},
    stop: function( event, ui ) {
            $(this).removeClass("dragging");
    },

});

$(".dragging-items").droppable({
    hoverClass: "drop-hover",
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

$(".droppable-list").droppable({
    drop:function(event, ui) {
    ui.draggable.detach().appendTo($(this));
        var drag_id = $(ui.draggable).attr("id");
        var drop_id = event.target.id;
        var $tbox   = $("input[name=droppable-list-"+ drop_id +"]");
        var current_data = $tbox.val();
        var new_data = current_data + drag_id + ", ";
        $tbox.val(new_data);
    },
});

HTML

<ul class="dragging-items">
<li class="draggable-item" id="1"> Item-1 </li>
<li class="draggable-item" id="2"> Item-2 </li>
<li class="draggable-item" id="3"> Item-</li>
</ul>

<div class="drag-drop">

    <div class="droppable-title"> Box 1 </div>
    <div class="droppable-item">
          <div class="droppable-list" id="1"></div>
     </div>
    <input type="text" class="droppable-input" name="droppable-list-1"> 
    </div>

    <div class="droppable-title"> Box 2 </div>
    <div class="droppable-item">
          <div class="droppable-list" id="2"></div>
     </div>
    <input type="text" class="droppable-input" name="droppable-list-2"> 
    </div>

</div>

JsFiddle https://jsfiddle.net/7e568v2y/

Answer 1

I found a number of oddities in CSS that may want to be corrected. A lot of missed ;, but that's not the main focus. Also, you have a number of repeated ID attributes and these must be unique in HTML. Consider the following code.

$(function() {
  function dropToArray(dropObj) {
    var results = [];
    $(".draggable-item", dropObj).each(function(i, el) {
      results.push($(el).data("drag-id"));
    });
    return results;
  }

  function updateDropList(dropObj) {
    var dropped = dropToArray(dropObj);
    var $tbox = $("input[name=droppable-list-" + dropObj.attr("id") + "]");
    $tbox.val(dropped.join(","));
  }

  $(".dragging-items .draggable-item").draggable({
    helper: "clone",
    opacity: 0.5,
    scroll: true,
    refreshPositions: true,
    start: function(event, ui) {
      $(this).addClass("dragging");

    },
    stop: function(event, ui) {
      $(this).removeClass("dragging");
    },
  });

  $(".dragging-items").droppable({
    hoverClass: "drop-hover",
    drop: function(event, ui) {
      ui.draggable.detach().appendTo($(this));
    }
  });

  $(".droppable-list").droppable({
    drop: function(event, ui) {
      var $this = $(this);
      if ($this.find(".droppable-list").length >= 2) {
        ui.draggable.draggable("option", "revert", true);
        return;
      } else {
        ui.draggable.detach().appendTo($(this));
        setInterval(function() {
          $(".droppable-list").each(function(i, el) {
            updateDropList($(el));
          });
        }, 100);
      }
    },
  });
});

Always best to create a few simple functions if you're going to be doing something often. I created two, one to iterate the container and build an array of the specific ID. To help ensure the same data comes back, I added the data-drag-id attribute. Now we can have unique IDs and still retain the ID Number for each item.

Working example: https://jsfiddle.net/Twisty/t1a40Lsn/22/

As you can see, when an item is dragged and dropped, it updates the field for all the lists. This addresses an issue if the user moves it from one box to another. Since the data is in an Array, we can simple use .join() to make a nice well formatted string of data.