使用自動保存拖放表格單元格

Question

我試圖操縱一個動態生成的表。 目前，我正在使用內容可編輯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腳本中拆分，並且更新了db ...

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，然后更新數據。

一切都很好，但是，我現在有一個請求，要求使單元格的內容可拖動。 基本上，如果某個內容已經在可內容編輯的單元格中被寫入，則它必須具有被拖到另一個可內容編輯的單元格中的能力，並且必須以與當前相同的方式將其寫入數據庫。 或者至少以相同的方式工作，不一定是當前代碼的完整副本。

考慮到我什至不知道從哪里開始，這使得Googling的答案異常困難。

我確實嘗試將單元格的內容包裝在一個范圍內，該范圍本身是可拖動的。 哪個可行，但當單元格可編輯時不起作用。

我確定的問題是我正在使用模糊，這意味着直到釋放鼠標或單擊其他位置后才寫入數據庫條目。 如果其他地方的那個在另一個單元格上，那就搞砸了。

3天，沒有解決方法，請幫忙:(

摘要...可編輯和可拖動的單元格。

我還應該提到，這些都包含在單個表中，因此僅限於單個表元素中。

Answer 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的一部分，但是對我的模糊進行調整可能會解決該問題。

如果以及當我解決該問題時，我們可能在某個地方，我會告訴您。 如果有人在這方面有任何建議，那將非常有幫助。

使用自動保存拖放表格單元格

問題描述

1 個解決方案

解決方案1
0 2016-03-27 21:05:55

使用自動保存拖放表格單元格

問題描述

1 個解決方案

解決方案1 0 2016-03-27 21:05:55

解決方案1
0 2016-03-27 21:05:55