p要素を編集可能なコンテンツとJQuery UIを並べ替え可能にする

Question

p要素をコンテンツを編集可能にし、JQuery UIをソート可能にすることはできますか？

以下の簡単な例では、p要素はソート可能ですが、テキストを編集することはできません。これを克服するためにとにかくありますか？コンテナがソート可能であるとpが編集可能であるが、私はまだ内部pを編集できないように

注私は、コンテナ内のネストp年代を試してみました。

$(document).ready(function() { 
 
    \t $(".elements").sortable({ 
 
\t connectWith: ".elements" 
 
\t }); 
 
});

p { 
 
\t height: 100px; 
 
\t background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="../dist/js/visual-designer.min.js"></script> 
 

 
<div class="elements"> 
 
\t <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p> 
 
\t 
 
\t <!-- Even if I nest p's in a container they still are not editable --> 
 
\t <div class="test-container"> 
 
\t \t <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p> 
 
\t </div> 
 
</div>

Answer 1

jQueryののcontentEditable =真要素にデフォルトで有効になっていくつかのイベントコールバックを上書きされるので、おそらくそれは、エディションを許可していないです。

focusinとfocusoutイベントを上書きして、そのエディションを許可することができます。彼らは下のリンクでそれをやっているか確認してください：私はそれはあなたを助けるいただければ幸い

Focus/blur events on contenteditable elements

、それが動作するように得ることで）いくつかのランダムな試みを通じて

Answer 2

を、私が見つかりました。その上でフォーカスを設定します（here：Nico Burnsのように）編集可能なコンテンツの最後にカーソルを移動すると、コンテンツを編集可能にするのに適しています。

ソート可能なのは、編集可能なコンテンツがevent.preventDefaultまたはcancelBubbleのような種類のためにフォーカスを得ることを妨げるからです。ここで

$(document).ready(function() { 
 
    $(".elements").sortable({ 
 
    connectWith: ".elements" 
 
    }); 
 

 
    $(".elements p").on("click", function(e) { 
 
    $(this).focus(); 
 
    setEndOfContenteditable(e.target); 
 
    }); 
 
}); 
 

 
function setEndOfContenteditable(contentEditableElement) { 
 
    var range, selection; 
 
    if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+ 
 
    { 
 
    range = document.createRange(); //Create a range (a range is a like the selection but invisible) 
 
    range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range 
 
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
 
    selection = window.getSelection(); //get the selection object (allows you to change selection) 
 
    selection.removeAllRanges(); //remove any selections already made 
 
    selection.addRange(range); //make the range you have just created the visible selection 
 
    } else if (document.selection) //IE 8 and lower 
 
    { 
 
    range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible) 
 
    range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range 
 
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
 
    range.select(); //Select the range (make it the visible selection 
 
    } 
 
}

p { 
 
    height: 50px; 
 
    background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="../dist/js/visual-designer.min.js"></script> 
 

 
<div class="elements"> 
 
    <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p> 
 

 
    <div> 
 
    <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p> 
 
    </div> 
 
</div>

Answer 3

要素がクリックされたときに、pタグがinputタグに変換され、フォーカスが失われたとき、そのpタグに変換例です！

$(document).ready(function() { 
 
\t // How to associate a handle that sits outside the element to be dragged? 
 
    \t $(".elements").sortable({ 
 
\t connectWith: ".foo" 
 
\t }); 
 
    
 
    function focusout(){ 
 
    var val = $('input[contenteditable*="true"]').val(); 
 
    var replacement2 = $('<p contenteditable="true">'+val+'</p>'); 
 
    $('input[contenteditable*="true"]').replaceWith(replacement2); 
 
    replacement2.on("click", clicked); 
 
    } 
 
    
 
    function clicked(){ 
 
    var replacement = $('<input contenteditable="true" value="'+this.innerHTML+'"/>'); 
 
    $(this).replaceWith(replacement); 
 
    replacement.on("focusout", focusout); 
 
    $('input[contenteditable*="true"]').focus(); 
 
    } 
 
    
 
    $('p[contenteditable*="true"]').on("click", clicked); 
 
    
 
});

p { 
 
\t height: 100px; 
 
\t background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="elements"> 
 
\t <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p> 
 
\t 
 
\t <!-- Even if I nest p's in a container they still are not editable --> 
 
\t <div class="test-container"> 
 
\t \t <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p> 
 
\t </div> 
 
</div>