如何使用唯一代碼將可拖動的可拖動回來

Question

我的應用程序的基本概念是將一組托盤映射到卡車上。我有一個頁面，允許用戶拖動一個可拖動的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); 

}

Answer 1

你可以存儲x和y座標的裝載托盤，然後當你重建頁面設置調色板的CSS位置：絕對;並將其放置在頂部並保留至存儲的x和y。並以編程方式將它們附加到可插入的div。

這一切都取決於你的插槽是如何工作的，如果你有很多droppables，並且每個droppable只能包含一個可拖動的對象，那麼只需要存儲這些對並且在你重建頁面時使用jquery添加可拖動對象。

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

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

如果你需要任何特殊的css像精確的頂部和左邊添加它的樣式屬性或與元素創建後的jQuery。