javascript — перетащите ячейки таблицы с автосохранением
Я пытаюсь манипулировать динамически сгенерированной таблицей. На данный момент я использую таблицу с редактируемым содержимым ТД. База данных обновляется с помощью следующего вызова AJAX …
$(document).ready(function(){
$("td[contenteditable=true]").blur(function(){
var msg = $(".alert");
var newvalue = $(this).text();
var field = $(this).attr("id");
$.post("fn-scp-update.php",field+"="+newvalue,function(d){
var data = JSON.parse(d);
});
});
});
Со следующими в td элементами для скрипта можно найти ….
echo '<td contenteditable="true" id="due_date:'.$row['id'].'">'.$date_display.'</td>';
Данные разделяются на отдельные PHP-скрипты, и БД обновляется …
foreach($_POST as $key=>$value){
$key = strip_tags(trim($key));
$value = strip_tags(trim($value));
$explode = explode(":",$key);
$user_id = $explode[1];
$field_name = $explode[0];
if(isset($user_id)){
if($field_name == 'due_date'){
$date = new DateTime($value);
$value = $date->format('Y-m-d');
}
elseif($field_name == 'pend_notes'){
$value=$conn->real_escape_string($value);
}
$update = $conn->query("UPDATE su_master SET $field_name='{$value}' WHERE id='$user_id'");
if($update){
$response = "Details Updated";
http_response_code(200); //Setting HTTP Code to 200 i.e OK
}else{
$response = "Not Modified";
http_response_code(304); //Setting HTTP Code to 304 i.e Not Modified
}
}else{
$response = "Not Acceptable";
}
}
}
В какой-то момент я займусь созданием PDO с функцией db.
Внутри td выбирается идентификатор, первая часть которого представляет собой имя столбца, идентификатор для ссылки на строку, а затем данные обновляются.
Все это работает очень хорошо, однако теперь у меня есть просьба сделать содержимое ячеек перетаскиваемым. По сути, если что-то уже записано в contenteditable ячейке, оно должно иметь возможность перетаскивания в другую contenteditable ячейку и данные, записанные в базу данных таким же образом, как и текущая. Или, по крайней мере, работать точно так же, не обязательно дословно копировать текущий код.
Учитывая, что я даже не знаю, с чего начать, это сделало поиск в Google невероятно трудным.
Я попытался обернуть содержимое ячейки в промежуток, который сам по себе был перетаскиваемым. Который работал, но не тогда, когда ячейка была редактируемой.
Я уверен, что проблема в том, что я использую размытие, что означает, что запись в db не записывается до тех пор, пока я не отпущу мышь или не нажму в другом месте. Если это в другом месте находится в другой камере, это портит падение.
3 дня и без разрешения помогите пожалуйста 🙁
Резюме … редактируемые и перетаскиваемые ячейки.
Следует также отметить, что все это содержится в одной таблице, поэтому ограничено одним элементом таблицы.
Решение
ОК, так что я нашел ответ в конце.
Чтобы захватить весь текст, я использовал щелчок, чтобы выделить весь текст внутри редактируемого содержимого. Используя этот метод, двойной щелчок все еще позволял редактировать содержание.
echo '<td contenteditable="true" onclick="document.execCommand(\'selectAll\',false,null)" id="pend_notes:'.$row['id'].'"><a href="'.$link.'">'.$row['pend_notes'].'</td>';
Затем, чтобы исправить проблему с FireFox, использовали следующее в качестве обходного пути …
var r = null;
var origParent = null;
function DoLoad()
{
document.addEventListener("drag", DoDrag, false);
document.addEventListener("drop", DoDrop, false);
}
function DoDrag(evt)
{
if (r == null)
{
var sel = window.getSelection();
var range = sel.getRangeAt(0);
r = range.cloneContents();
origParent = evt.rangeParent;
console.log('r is now set');
}
}
function DoDrop(evt)
{
if (r != null)
{
console.log('inserting node.');
var rng = document.createRange( );
rng.setStart(evt.rangeParent, evt.rangeOffset);
//console.log('inserting node.');
rng.insertNode(r);
r = null;
evt.stopPropagation();
}
else{
console.log('r is null...');
}
}
Потом грузится по кузову
<body onload="DoLoad()">
Это исправило (по крайней мере, пока FF что-то не изменит) невозможность перетаскивания между ячейками при использовании contenteditable.
Это не устраняет проблему, заключающуюся в том, что хотя ячейка была отброшена, она на самом деле не существует как часть предмета иска, пока она не была повторно нажата, а затем нажата, но настройка моего размытия может исправить это.
Если и когда я найду решение этой проблемы, мы можем быть где-то рядом, и я дам вам знать. Если у кого-нибудь есть какие-либо предложения по этому поводу, это было бы очень полезно.
Другие решения
Других решений пока нет …