更新關於拖放的JavaScript數據

我正在與一個django後端和只有jQuery客戶端的員工調度應用程序。我有一張表，每一行都是員工，每一列都是日期。每個<td>內部都可以是<div>，它是換檔的圖形表示。 divs可拖放/放入其他單元格。更新關於拖放的JavaScript數據

我的問題是這樣的：如何將移位數據存儲在客戶端並在將移位拖動到其他員工或日期時進行更新？

當前我使用JQuery UI來處理拖放操作，創建表格的django模板以及保存數據的實際DOM（<span>來保存啓動時間，由innerHTML訪問等）。我想有一些JavaScript對象，當它的相應的圖形對象被拖拽到另一個單元格時被更新。

對這個應用程序使用的技術沒有要求，所以對其他技術的任何建議都是值得歡迎的，但我更願意在後端堅持使用Django和Python。

相關的代碼：移位HTML對象

<div class="shift draggable-shift"> 
<span style="display:none">{{id}}</span> 
<div class="shift-top"> 
    <p class="shift-text"> 
     <span>{{start_time}}</span> - <span>{{end_time}}</span> 
    </p> 
</div> 
<div class="shift-bottom"> 
    <p class="shift-text"> 
     {{role}} 
    </p> 
</div> 
</div>

日期和僱員被標識在包含移位<td>發現（例如1-2009-12-14 - > EMPLOYEEID最新。）和start_time，end_time，shift-id和role從模板生成的標記中找到。

的JavaScript來提取數據：

var draggable = ui.draggable; 
draggable.parent().html(''); 
$(this).html(draggable); 
draggable.css("left",""); 
draggable.css("top",""); 
draggable.css("position",""); 
draggable.draggable(); 
console.log($(this).attr('id')); 
id = draggable.children()[0].innerHTML; 
start = draggable.children()[1].children[0].children[0].innerHTML; 
end = draggable.children()[1].children[0].children[1].innerHTML; 
role = draggable.children()[2].children[0].innerHTML; 
console.log(id + start + end); 
var shift = {}; 
//shift["id"] = id; 
shift["start"] = start; 
shift["end"] = end; 
shift["role"] = role; 
shift["employee"] = $(this).attr("id").substring(0,1); 
shift["date"] = $(this).attr("id").substring(2); 
modified["changed"][id] = shift; 
j = JSON.stringify(modified); 
console.log(modified); 
console.log(j);

來源

2014-01-11 Colton W

使用jQuery UI Sortable/Draggable？並且，顯示一些代碼/標記。 – user2864740

我正在使用jQuery UI Draggable/Droppable，無法排序。我只是從前面的''中刪除html，並將其添加到新的''。 –

其實我也來翻過那效果要好得多自己的答案。

使用jQuery的.data()函數，您可以將數據添加到不能從用戶訪問的DOM對象。

來源

2014-01-11 16:34:59

更新關於拖放的JavaScript數據

回答

相關問題