Mam nadzieję, że możesz pomóc w rozwiązaniu tego problemu.Przenoszenie elementu html zawierającego treść Dodane do innej gałęzi w domie bez utraty ostrości
Mam następującą strukturę html (uproszczoną), która reprezentuje dwie strony o stałej wysokości w dokumencie z nagłówkami, stopkami, treścią i liczbą "DataItems" (3 tylko do odczytu, 1 edytowalne) wewnątrz tej treści. Istnieją również elementy "Data" i "Dodaj".
Potrzebuję być w stanie przenieść blok DataItem html (który może zawierać element contentEditable) w inne miejsce w dokumencie. Jednak muszę to zrobić bez utraty koncentracji na elemencie contentEditable, jeśli jest to element, który jest przenoszony.
To działanie jest wywoływane, gdy użytkownik wpisuje w edytorze treści contentEditable HTML, a DataItem, do którego wpisują, jest wyższy. W takim przypadku, gdy dolny DataItem zacznie nakładać się na stopkę, zostanie przesunięty do następnej strony. Trochę jak wpisywanie w komórce tabeli w MS Word, której nie wolno łamać na różnych stronach.
Mogę uzyskać częściowe rozwiązanie działające z jQuery. Przenosi to następne elementy siostrzane DataItems z pierwszej strony na drugą stronę, ponieważ poprzednie rodzeństwo rośnie, ale problem polega na tym, że kiedy idę, aby przenieść obiekt DataItem, który ma fokus, traci ostrość i łamie przepływ użytkownika podczas pisania . Próbowałem ponownie skupić się na contentEditable div po przeniesieniu go, ale problemy z wyborem i zasięgiem oraz brak możliwości znalezienia pozycji kursora plus problemy z przesuwaniem się pasków przewijania pomimo ich cofnięcia okazały się zbyt niewiarygodne.
W związku z tym próbowałem inne podejście, które było przenieść całą zawartość html między ostatnią DataItem pierwszej strony i pierwszego DataItem (jeśli jest) z następnej strony do pozycji przed ostatnim elementem danych, w nadziei, że spowodowałoby to, że edytor treści HTML nie utraciłby ostrości, ale nadal sprawiał wrażenie, że DataItem przesunął się na drugą stronę.
Funkcją, której próbowałem (i nie udało się) osiągnąć, jest przecięcie html między działami "start-here" i "end-here" i przeniesienie go do elementu div "wklej tutaj". Divy są po prostu jako placeholder, aby pokazać, co należy przenieść.
Jednakże, pomimo próbowania różnych metod przy użyciu manipulacji jQuery dom i wymiany ciągu RegEx, nie mogę wymyślić rozwiązania, które nie wymaga zastąpienia wspólnego przodka - który jest elementem "Strony" - i stąd aby zastąpić bieżącą treść, a następnie utratę fokusu.
Czy ktoś ma pomysł, w jaki sposób mogę to zrobić i zachować ostrość, aby użytkownik mógł kontynuować pisanie bez przerw?
Pozdrawiam, 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>