0

我的应用程序的基本概念是将一组托盘映射到卡车上。我有一个页面，允许用户拖动可拖动的 div“托盘”并将其放置在卡车上的可放置 div“插槽”中。每行、左右列的重量和卡车总重量都是即时计算的。然后，我将所有信息传递到一个页面以打印托盘和槽位表，以便操作员可以装载卡车。如果用户只装载了一半的卡车然后想稍后再回来完成，那么问题就在于恢复负载。我知道如何保存任意数量的数据点，但是当我重建页面时，我找不到将“托盘”放回其“插槽”的方法。

这是托盘的 div，一些插槽和放置过程（我不确定还需要什么）

      //load the playpen with the pallets that belong on this truck
  for (var i = 0; i < noPallets; i++) {
      $('<div id="' + PalletIDs[i] + '">' + PalletIDs[i] + '<br>' + Storage[i] + ':' + Weights[i] + '</div>').data('pallet', 
      { ID: PalletIDs[i], Weight: Weights[i], columnNo: 0, rowNo: 0, tierNo:0 }).appendTo('#playpen').draggable({
      containment: '#content',
      stack: '#playpen div',
      cursor: 'move',
      start: handlePalletStart,
      revert: true
  });
  }
  // Create the pallet slots for truck left
   var words = ['C<br>one', 'C<br>two', 'C<br>three', 'C<br>four', 'C<br>five', 'C<br>six', 'C<br>seven', 'C<br>eight', 'C<br>nine', 'C<br>ten', 'C<br>eleven'];
   for (var i = 1; i <= 11; i++) {
     position = 1000 + (i * 10) + 3
       $('<div id="' + position + '">' + words[i - 1] + '</div>').data('position', { columnNo: 1, rowNo: i, tierNo: 3 }).appendTo('#truckleftC').droppable({
           accept: '#playpen div',
           hoverClass: 'hovered',
           drop: handlePalletDrop
       });
   }

    function handlePalletDrop(event, ui) {
    // this is the truck location we are about to drop into

  var columnNo = $(this).data('position').columnNo;
  var rowNo = $(this).data('position').rowNo;
  var tierNo = $(this).data('position').tierNo;
  // this is pallet information
  var palletID = ui.draggable.data('pallet').ID;
  var weight = ui.draggable.data('pallet').Weight;
  // if the pallet was already in a positio, we need to zero that position
  if (ui.draggable.data('pallet').columnNo != 0) {
      oldposition = ui.draggable.data('pallet').columnNo * 1000 + ui.draggable.data('pallet').rowNo * 10 + ui.draggable.data('pallet').tierNo;
      //          alert(oldposition);
    for (var h = 0; h <= 65; h++) {
        if (aryTWeight[h][0] == oldposition) {
            aryTWeight[h][1] = 0;
        }
    }
  }

  // set the position in the truck for this pallet
  ui.draggable.data('pallet').columnNo = columnNo;
  ui.draggable.data('pallet').rowNo = rowNo;
  ui.draggable.data('pallet').tierNo = tierNo;
  // set the weight for this position in the truck
  position = columnNo * 1000 + rowNo * 10 + tierNo
 //      alert(position);
  for (var h = 0; h <= 65; h++) {
      if (aryTWeight[h][0] == position) {
          aryTWeight[h][1] = weight;
     }
  }
 //     alert(columnNo + ' : ' + rowNo + ' : ' + tierNo);

  // set the hidden text box with the palletid so data can be posted to next page
  for (var i = 0; i < document.forms[0].elements.length; i++) {
      element = document.forms[0].elements[i];
      if (element.name == oldposition) {
          element.value = 0;
      };
      if (element.name == position) {
          element.value = palletID;
      };
  }
  // set all of the weights for rows, columns and totals
  calcWeights();

  ui.draggable.addClass('correct');
  ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });
  ui.draggable.draggable('option', 'revert', false);

}

4

1 回答 1

1

您可以存储已加载托盘的 x 和 y 坐标，然后在重建页面时设置调色板的 css 位置：absolute; 并将 top 和 left 设置为存储的 x 和 y。并以编程方式将它们附加到可放置的 div 中。

这完全取决于您的插槽是如何工作的，如果您有很多可放置对象并且每个可放置对象只能包含一个可拖动对象，那么只需存储这些对并在重建页面时使用 jquery 将可拖动对象附加到可放置对象。

var html = '<div id="myDraggableDiv"></div>'

$('#' + droppableId).append(html);

如果您需要任何特殊的 css，例如精确的顶部和左侧，请在创建元素后将其添加到样式属性或 jquery 中。

于 2013-02-08T20:38:39.330 回答