javascript - Jquery UI drop event plain/text between text in Div contentEditable

Question

很抱歉我的英语不好，但我尽量让这个问题易于理解。

在snippet(或jsfiddle)中，我们可以找到两个可拖动的项目:

1. foo(如果您将它拖放到 Div content editable 中，[% foo %] 文本会出现在我们将其放在文本之间的位置)
2. foo2(它具有Jquery UI 拖动样式(它跟随光标))

我想用 jquery UI 风格实现 foo 的功能。但是当我尝试时:event.dataTransfer.setData("text/plain", "[%"+ event.srcElement.innerHTML + "%]"); 如果我尝试像这样定义函数:

drag: function(ui, event) 

foo2 Stop work 的 Action (这意味着代码中有一个错误)

这是片段:

//$( "#foo2" ).draggable();
$( "#foo2" ).draggable({
      start: function(ui) {

				  event.preventDefault();
      },
      drag: function(ui) {

      },
      stop: function(ui) {

      }
    });


var btn = document.getElementById("foo");
btn.onclick = function(event) {
  event.preventDefault();
};

btn.ondragstart = function(event) {
  event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");
};

<span draggable="true" id="foo" class="btn btn-primary">Foo</span>
<div style="background:red" contenteditable="true" >Put foo between this and this</div>
<a  id="foo2" class="btn btn-primary">Foo2</a>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

同一个演示:http://jsfiddle.net/fbprfj5c/1/

感谢您的所有帮助、建议或提示:)

更新:

回应加埃塔诺:我喜欢你的想法，没有说出所有细节是我的错。你得到了主要思想，但是获取字符宽度并计算位置的棘手方法我可以做一个类似的函数来实现相同的效果，更大的 div(在 y 轴上)。但是在 div 中可以有比字符更多的元素。我会从你的想法开始，但我认为为此打开另一个问题是一种耻辱。另一方面你解决了问题但是那个“hacky”/模拟以获得我试图改进的插入符号位置(我之前尝试过但没有实现它), 所以让我们稍等一下是否有人有想法

Answer 1

您可以使用 Droppable对于 div 元素，并将您的 foo2 可拖动元素连接到可放置元素。

$('div[contenteditable="true"]').droppable({
    drop: function( e, ui ) { // 6.413793103448276
        var charWidth = getCharWidth(this);
        var position = Math.round(ui.offset.left / charWidth);
        position = (position - 1 >= 0) ? position - 1 : position;
        $(this).text(function(idx, txt) {
            return txt.substr(0, position) + "[%" + ui.draggable.text() + "%]" + txt.substr(position + 1);
        })
    }
});
$( "#foo2" ).draggable({
    connectToSortable: 'div[contenteditable="true"]',
    revert: "invalid",
    helper: "clone"
});


var btn = document.getElementById("foo");
btn.onclick = function(event) {
    event.preventDefault();
};

btn.ondragstart = function(event) {
    event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");
};



function getCharWidth(ele) {
    var f = window.getComputedStyle(ele)['font'],
            o = $('<div>' + ele.textContent + '</div>')
                    .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
                    .appendTo($('body')),
            w = o.width() / ele.textContent.length;
    o.remove();
    return w;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<span draggable="true" id="foo" class="btn btn-primary">Foo</span>
<div style="background:red" contenteditable="true" >Put foo between this and this</div>
<a  id="foo2" class="btn btn-primary">Foo2</a>