使用自动保存拖放表格单元格答案

【问题标题】：Drag and drop table cells with autosave使用自动保存拖放表格单元格
【发布时间】：2016-03-27 17:49:30
【问题描述】：

我正在尝试操作动态生成的表。目前我正在使用带有内容可编辑 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";
    }
}
}

我会在某个时候开始制作 db 函数 PDO。

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

这一切都很好，但是，我现在有一个要求，使单元格的内容可拖动。基本上，如果某些内容已经写入 contenteditable 单元格，则它需要能够被拖到另一个 contenteditable 单元格，并且数据以与当前相同的方式写入数据库。或者至少以相同的方式工作，不一定是当前代码的逐字副本。

鉴于我什至不知道从哪里开始，这让谷歌搜索变得异常困难。

我确实尝试将单元格的内容包装在一个跨度中，它本身是可拖动的。哪个有效，但在单元格可编辑时无效。

我确定的问题是我正在使用模糊，这意味着直到我释放鼠标或单击其他位置后才会写入 db 条目。如果其他地方在另一个单元格上，它就会搞砸了。

3天了，还没有解决，请帮忙:(

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

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

【问题讨论】：

我真是个傻瓜，问错了问题。我使用 Firefox 开发者版，并且刚刚读到 Firefox 无法将文本从一个单元格拖到另一个单元格而不使其消失。在 chrome/IE 中，我可以只使用 onclick 突出显示所有文本，然后拖动它，效果很好:( ...所以改写 .. 如果有人知道在 Firefox 中使用此功能的解决方法？？？？跨度>

标签： javascript php jquery ajax contenteditable

【解决方案1】：

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

为了获取所有文本，我使用了 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 时无法在单元格之间拖放的问题。

虽然单元格已被删除，但它并不真正作为 contenteditable 的一部分存在，直到它被重新单击然后单击关闭，但对我的模糊进行调整可能会解决这个问题那个。

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

【讨论】：