Jquery UIのドロップイベントプレーンテキスト/ Divのテキスト間のテキストcontentEditable

Question

私の悪い英語は申し訳ありませんが、質問を分かりやすくしようとしています。

1. のfoo（あなたがそれをドラッグすると本部含有量の低下編集可能 [％fooの：

   スニペット（またはjsfiddle）で私たちは、2ドラッグのアイテムを見つけることができます％]テキストは、テキストの間にをドロップするところに表示されます）

2. foo2（これはのJquery UIのドラッグスタイルです））

私はfooのfunctionalittyを、jqueryのUIスタイルで実現したいと考えています。しかし、私はしようとすると：event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");私はこのような関数を定義しようとした場合、イベントが定義されていないように見えます：

drag: function(ui, event) 

foo2は停止作業の動きを（それが意味するコードでエラーです

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

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

同じデモ：：こちら）

はスニペットですガエターノに対応して

：

すべてのご協力、お薦めやヒントをお寄せいただきありがとうございます:)

更新は 私はあなたのアイデアが好きで、なしすべての詳細を伝えるために私のせいです。あなたは主なアイデアを得るが、キャラクターの幅を取得し、より大きなdiv（y軸）で同じ効果を達成するために同様の機能を実行することができる位置を計算するトリッキーな方法を得ます。しかしdivには文字より多くの要素があります。私はあなたのアイデアから始めるだろうが、私はこれについて別の質問を残すことが残念だと思う。別の手で問題を解決するが、それを達成することなく前に試して、キャレットの位置を取得する "ハッキー" /シミュレーション）だから、誰かが少しでもアイデアを持っているのを待たせてください。

Answer 1

div要素にDroppableを使用し、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>