1

我使用'd dragula 来拖动元素，我需要使这个移动的元素可编辑。

当可编辑元素不在移动/复制元素中时，它正在工作。

这个问题是怎么解决的？我认为，问题 javascript js $(document).ready editable 从 span 创建一个 textarea。

JS

function divClicked() {
    var divHtml = $(this).html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<span class=\"editable\">");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    viewableText.click(divClicked);
}

$(document).ready(function () {
    $("span.editable").click(divClicked);
    $('#btn').click(function () {
        divClicked.call($('div#one'));
    });
});

HTML

<div class='parent'>
    <label for='hy'>Copying stuff is common too, so we made it easy for you.</label>
    <div class='wrapper'>
      <div id='left-copy-1tomany' class='container'>
        <div id="block"><div><span class='handle'>+</span>When elements are copyable, <span class="editable">Here is my original text.</span></div></div>
        <div id="block"><div><span class='handle'>+</span>Copying prevents original elements from being dragged. A copy gets created and <em>that</em> gets dragged instead</div></div>
        <div id="block"><div><span class='handle'>+</span>Whenever that happens, a <code>cloned</code> event is raised</div></div>
      </div>
      <div id='right-copy-1tomany' class='container'>

      </div>
    </div>
  </div>

https://jsfiddle.net/4edfqy02/

4

0 回答 0