Javascript 使用autosave拖放表格单元格_Javascript_Php_Jquery_Ajax_Contenteditable

Javascript 使用autosave拖放表格单元格

javascript php jquery ajax

Javascript 使用autosave拖放表格单元格,javascript,php,jquery,ajax,contenteditable,Javascript,Php,Jquery,Ajax,Contenteditable,我试图操作一个动态生成的表。目前，我正在使用一个包含可编辑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-updat

我试图操作一个动态生成的表。目前，我正在使用一个包含可编辑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>';

我将在某个时候开始做db函数PDO

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

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

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

我确实试过把牢房里的东西包在一个跨度内，这个跨度本身是可以拖动的。这起作用，但在单元格可编辑时不起作用

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

3天，无决议，请帮助：(

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

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

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

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

echo '<td contenteditable="true" onclick="document.execCommand(\'selectAll\',false,null)" id="pend_notes:'.$row['id'].'"><a href="'.$link.'">'.$row['pend_notes'].'</td>';

然后装在身上

<body onload="DoLoad()">

这修复了（至少在FF更改某些内容之前）在使用contenteditable时无法在单元格之间拖放的问题

它并没有解决这样一个问题，即尽管单元格已被删除，但在重新单击并关闭之前，它实际上并不作为contenteditable的一部分存在，但对我的模糊进行调整可能会解决这个问题

如果我着手解决这个问题，我们可能就在附近，我会让你知道。如果有人对这方面有任何建议，这将非常有用。

我真是个傻瓜，问了一个错误的问题。我使用Firefox developer edition，刚刚读到Firefox不能在没有你的情况下将文本从一个单元格拖到另一个单元格在chrome/IE浏览器中，我可以用鼠标点击突出显示所有文本，然后拖动它，效果非常好：（…换言之……如果有人知道在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()">