拖放序列化项目

Question

我正在尝试制作一个具有拖放问题类型的考试应用程序，用户可以拖动正确的元素来更正可放置的框。总的来说，我需要删除 elements/items id 作为数组或另一个并插入到 mysql 和 php。我做了以下事情：

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

我在 CSS 中发现了一些可能需要更正的奇怪之处。漏掉了很多;，但这不是重点。此外，您有许多重复的 ID 属性，并且这些属性在 HTML 中必须是唯一的。考虑以下代码。

$(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);
      }
    },
  });
});

如果您要经常做某事，最好始终创建一些简单的函数。我创建了两个，一个用于迭代容器并构建特定 ID 的数组。为了帮助确保返回相同的数据，我添加了 data-drag-id 属性。现在我们可以拥有唯一的 ID，并且仍然保留每个项目的 ID 号。

工作示例：https://jsfiddle.net/Twisty/t1a40Lsn/22/

如您所见，当拖放项目时，它会更新所有列表的字段。如果用户将它从一个盒子移到另一个盒子，这将解决一个问题。由于数据在一个数组中，我们可以简单地使用 .join() 来制作一个格式良好的数据字符串。

拖放序列化项目

Drag and Drop serialize items

javascript

jquery

jquery-ui