Question

我很抱歉我的英语不好，但我试着让这个问题变得可以理解。

在代码段（或 jsfiddle ）中我们可以找到两个可拖动的项：

foo（如果你拖动它并放入 Div内容可编辑，[％foo％]文字会出现在它在文字之间的地方）
foo2（这有 Jquery UI拖动样式（它跟在光标后面））

我想用jquery UI风格实现foo的功能。但是当我尝试：event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");如果我尝试定义这样的函数，看起来似乎没有定义事件：

drag: function(ui, event)

foo2的动作停止工作（这意味着代码中的错误）

以下是片段：

//$( "#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 draggable元素连接到droppable。

＆＃13;

$('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;
}

＆＃13;

<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>

＆＃13;

在div contentEditable中的文本之间的Jquery UI drop事件plain / text

1 个答案: