更新关于拖放的JavaScript数据

Z时代
2024-01-10
分类：问答

我正在与一个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);