更新关于拖放的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数据

回答

相关问题