用Dragula编辑的js span元素不起作用

时间:2017-04-22 07:12:44

标签: javascript jquery dragula

我使用dragula拖动元素,我需要将此移动的元素设置为可编辑。

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

如何解决这个问题?我认为,这是问题javascript js $(文件).ready editable从跨度制作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>

graph

0 个答案:

没有答案