Question

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

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()来制作格式良好的字符串。

希望有帮助。

拖放序列化项目

1 个答案: