Обновление данных javascript при перетаскивании

Question

Я работаю над приложением для планирования сотрудников с бэкэндом django и только с jQuery клиентами. У меня есть таблица, где каждая строка является сотрудником, а каждый столбец - это дата. Внутри каждого <td> может быть <div>, который представляет собой графическое представление сдвига. Дивы перетаскиваются в другие ячейки.

Мой вопрос заключается в следующем: как я могу хранить данные на сдвиге на стороне клиента и обновлять его, когда перетаскивание переносится на другого сотрудника или дату?

В настоящее время я использую пользовательский интерфейс JQuery для обработки перетаскивания, создания шаблона django для создания таблицы и фактического DOM для хранения данных (<span> для хранения времени начала, доступ к которому осуществляется через innerHTML и т. Д.). Я хочу иметь некоторый объект javascript, который обновляется, когда соответствующий графический объект перетаскивается в другую ячейку.

Нет требований к технологиям, используемым для этого приложения, поэтому любые предложения по другим технологиям приветствуются, но я бы предпочел придерживаться Django и Python в бэкэнд.

Связанные Код: Сдвиг HTML Object

<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 и роль находятся из созданной шаблоном разметки.

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); 

Answer 1

Я на самом деле встречу ответ самого, который работает намного лучше.

Используя функцию jQuery's .data(), вы можете добавить данные к объекту DOM, который недоступен для пользователя.