Spero che tu possa aiutare con questo problema.Spostamento di elementi HTML contenenti contentEditable su un altro ramo in dom senza perdere il focus
Ho la seguente struttura html (semplificata) che rappresenta due pagine a altezza fissa in un documento con intestazioni, piè di pagina, un corpo e un numero di "DataItems" (3 readonly, 1 modificabile) all'interno di quel corpo. Ci sono anche un "Riassunto" e "Aggiungi nuovo" DataItems.
Devo essere in grado di spostare un blocco di html di DataItem (che può contenere un elemento contentEditable) in un'altra posizione nel documento. Tuttavia, ho bisogno di farlo senza perdere l'attenzione sull'elemento contentEditable se è quello che viene spostato.
Questa azione viene attivata mentre l'utente sta digitando nell'editor HTML contentEditable e il DataItem che stanno digitando diventa più alto. In questo modo, quando DataItem in basso inizia a sovrapporsi al piè di pagina, viene spostato nella pagina successiva. Un po 'come digitare in una cella di una tabella in MS Word che non è consentito sfondare tra le pagine.
Posso ottenere una soluzione parziale lavorando con jQuery. Questo si sposta accanto a DataItems fratello dalla prima pagina alla seconda pagina come un fratello precedente cresce in altezza, ma il problema con questo è che quando passo a spostare il DataItem che ha lo stato attivo, perde lo stato attivo e interrompe il flusso di digitazione dell'utente . Ho provato a mettere il focus al div ContentEditable dopo averlo spostato, ma i problemi con la selezione e l'intervallo e non essere in grado di trovare la posizione del cursore più problemi con le barre di scorrimento che saltavano nonostante fossero ripristinati hanno dimostrato che la soluzione era troppo inaffidabile.
Ho quindi provato un approccio diverso che doveva spostare tutto il contenuto html tra l'ultimo DataItem della prima pagina e il primo DataItem (se presente) della pagina successiva in una posizione prima dell'ultimo elemento di dati, nella speranza che ciò impedirebbe all'html content editor di perdere lo stato attivo, ma darebbe comunque l'impressione che DataItem sia passato alla seconda pagina.
La funzionalità che ho provato (e non è riuscita) a raggiungere è quella di tagliare l'html tra le divisioni "start-here" e "end-here" e spostarlo nel div "paste-here". I div sono solo lì come segnaposto per mostrare ciò che dovrebbe essere spostato.
Tuttavia, nonostante i vari metodi che utilizzano la manipolazione di jQuery dom e la sostituzione di una stringa RegEx, non riesco a trovare una soluzione che non preveda la sostituzione dell'antenato comune, che è il div di "Pages", e che quindi ha per sostituire il contenuto correnteEditable - e quindi perdere l'attenzione.
Qualcuno ha un'idea di come potrei fare questo e mantenere l'attenzione in modo che l'utente possa continuare a digitare senza interruzioni?
saluti, Jeremy :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.Document
{
text-align:left;
margin: 0px auto;
display:inline-block;
position:relative;
/*border: 1px solid blue;*/
}
.Pages
{
margin: 0px auto;
position:relative;
display:inline-block;
/*border: 1px solid yellow;*/
}
.PortraitPage
{
height:29.7cm;
width:21cm;
background: #ffffff;
position:relative;
}
.FirstPage
{
border: 1px dotted black;
}
.ExtraPage
{
margin-top:10px;
margin-bottom:10px;
border: 1px dotted black;
}
.PageHeader
{
border: 0px dotted #e2e2e2;
position:absolute;
top:0px;
width: 18cm;
left:0cm;
}
.PageBody
{
border: 1px dotted #c2c2c2;
position:absolute;
top:4.5cm; /* this needs to be whatever the height of the header is */
width: 18cm;
left:1.5cm;
/*min-height:22cm;*/
}
.PageFooter
{
border: 1px dotted #e2e2e2;
position:absolute;
bottom:0px;
width: 18cm;
left:1.5cm;
}
.PageSeparator
{
background: #999999;
height: 1cm;
width: 21cm;
}
.InvoiceItemsForm
{
position: relative;
/*top: 2.5cm;*/
}
/* This prevents the space added in contentcell divs in the html entry cell just for the PageEditor */
.InvoiceItemsForm div
{
margin-bottom: 0px;
}
.LineItem_Panel_ReadOnly
{
position:relative;
border: 1px solid transparent;
}
.LineItem_Panel_ReadOnly_Hover
{
position:relative;
border: 1px solid #C2C2C2;
background-color:#ffffff;
}
.LineItem_Panel_Edit
{
position:relative;
border: 1px solid #C2C2C2;
}
.LineItem_Panel_Insert
{
position:relative;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="ctl00_phContent_pnlInvoicePage" class="Page FirstPage PortraitPage">
<div class="FirstHeader PageHeader">
First Page Header
</div>
<div class="ExtraHeader HiddenExtraPageSection">
Hidden ExtraPage Header that is copied when a new page is created
</div>
<div id="ctl00_phContent_pnlInvoicePageBody" class="PageSection Body PageBody">
<div id="ctl00_phContent_pnlInvoiceItemsForm" class="InvoiceItemsForm DataSection">
<div id="ctl00_phContent_lvLineItems_ctrl0_pnlLineItemReadOnly" class="DataItem LineItem_Panel_ReadOnly InvoiceLineItem">
<div class="LineItem_Panel_HTMLContent">
<span id="ctl00_phContent_lvLineItems_ctrl0_lblHTMLContent">
<p>
aaaaaaaaaaaaaaa</p>
<p>
aaaaaaaaaaaaaa</p>
</span>
</div>
</div>
<div id="ctl00_phContent_lvLineItems_ctrl1_pnlLineItemReadOnly" class="DataItem LineItem_Panel_ReadOnly InvoiceLineItem">
<div class="LineItem_Panel_HTMLContent">
<span id="ctl00_phContent_lvLineItems_ctrl1_lblHTMLContent">
<p>
bbbbbbbbbbbbbbb</p>
<p>
bbbbbbbbbb</p>
</span>
</div>
</div>
<div id="ctl00_phContent_lvLineItems_ctrl2_pnlLineItemReadOnly" class="DataItem LineItem_Panel_ReadOnly InvoiceLineItem">
<div class="LineItem_Panel_HTMLContent">
<span id="ctl00_phContent_lvLineItems_ctrl2_lblHTMLContent">cccccccccccccc</span>
</div>
</div>
<div id="ctl00_phContent_lvLineItems_ctrl3_pnlLineItemEdit" class="DataItem LineItem_Panel_Edit InvoiceLineItem">
<div id="ctl00_phContent_lvLineItems_ctrl3_pnlHTMLEditor" class="HTMLEditorPanel">
<div style="width: 126px; height: 20px;" id="ctl00_phContent_lvLineItems_ctrl3_txtHTMLContent$HtmlEditorExtenderBehavior_ExtenderContainer"
class="unselectable ajax__html_editor_extender_container">
<input style="display: none; visibility: hidden;" id="ctl00_phContent_lvLineItems_ctrl3_txtHTMLContent"
name="ctl00$phContent$lvLineItems$ctrl3$txtHTMLContent" value="ddddddddddddd"
type="text" autocomplete="off">
<div style="height: 21px; overflow: auto; clear: both;" id="ctl00_phContent_lvLineItems_ctrl3_heeHTMLContent_ExtenderContentEditable"
class="ajax__html_editor_extender_texteditor" contenteditable="true">
<p>
ddddddddddddd</p>
<p>
</p>
</div>
</div>
</div>
</div>
<div class="DataItem">
<p>
Click <a id="ctl00_phContent_lvLineItems_lbAddLineItem" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$phContent$lvLineItems$lbAddLineItem", "", true, "", "", false, true))'>
here</a> to add a new Data Item</p>
</div>
<div id="paste-here"></div>
<div class="DataItem InvoiceTotals">
<div class="InvoiceSubTotal">
Sub Total: <span id="ctl00_phContent_lvLineItems_lblInvoiceSubTotal">18,110.00</span></div>
<div class="InvoiceVATTotal">
VAT Total: <span id="ctl00_phContent_lvLineItems_lblInvoiceVATTotal">3,111.00</span></div>
<div class="InvoiceTotal">
Invoice Total: <span id="ctl00_phContent_lvLineItems_lblInvoiceTotal">21,221.00</span></div>
</div>
<div id="start-cut"></div>
</div>
</div>
<div class="FirstFooter PageFooter">
First Page Footer
</div>
<div class="ExtraFooter HiddenExtraPageSection">
Hidden ExtraPage Footer that is copied when a new page is created
</div>
</div>
<div id="ctl00_phContent_pnlInvoicePage" class="Page ExtraPage PortraitPage">
<div class="ExtraHeader PageHeader">
Extra Page Header
</div>
<div id="ctl00_phContent_pnlInvoicePageBody" class="PageSection Body PageBody">
<div id="ctl00_phContent_pnlInvoiceItemsForm" class="InvoiceItemsForm DataSection">
<div id="end-cut"></div>
</div>
</div>
<div class="ExtraFooter PageFooter">
Extra Page Footer
</div>
</div>
</body>
</html>