使用自动保存功能拖放表格单元格 - Drag and drop table cells with autosave

我正在尝试操作一个动态生成的表。目前，我正在使用一个内容可编辑td的表。使用以下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。

在td中，id被提取，第一部分是列名，一个用于行引用的id，然后更新数据。

这一切都很好地工作，然而，我现在有一个请求，使单元格的内容可拖动。基本上，如果内容可编辑单元格中已经写入了某些内容，则需要能够将其拖动到另一个内容可编辑的单元格，并以与当前相同的方式将数据写入数据库。或者至少以同样的方式工作，不一定是当前代码的逐字复制品。

考虑到我甚至不知道从哪里开始，这让在谷歌上搜索答案变得异常困难。

我确实试着把牢房里的东西包裹在一个跨度里，这个跨度本身就是可以拖动的。这有效，但在单元格可编辑时无效。

我确信问题是我使用的是模糊，这意味着数据库条目直到我释放鼠标或单击其他地方之后才被写入。如果其他地方的手机在另一个手机上，那就是在搞砸投放。

3天，没有解决方案，请帮助：（

摘要。。。可编辑和可拖动的单元格。

我还应该提到，这一切都包含在一个表中，因此仅限于一个表元素中。

好的，所以我最终找到了答案。

为了获取所有文本，我使用onclick来选择可编辑内容中的所有文本。使用这种方法，双击仍然允许编辑内容。

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时无法在单元格之间拖放的问题。

它并没有解决这样一个问题，即尽管单元格已经被删除，但在重新单击并关闭之前，它并不是可编辑内容的一部分，但对我的模糊进行调整可能会解决这个问题。

如果我有时间解决这个问题，我们可能就在附近，我会告诉你的。如果有人对此有任何建议，那将是非常有帮助的。