jquery - Tinymce 内で jQuery を使用する - 具体的には、div をドラッグ可能にするボタンを追加します。

Question

私はjQueryとtinymceの両方に慣れていません.1週間ほどいじっています。

tinymce の jQuery バージョンを開始しました - 間違っている場合は訂正します - これにより、エディタ インスタンス自体で jQuery を使用できるようになると思いました - 正しいですか?

tinymce インスタンスを使用して、content という名前の div タグを介してページ全体をカバーします。

tinymce インスタンスにボタンを追加して、サイズ変更可能な div をエディターに追加できるようにしました。

   setup :    function(ed) {
            ed.addButton('mybutton', {
                title : 'My button',
                image : 'img/example.gif',
                onclick : function() {
                    var aHtml = 
                        '<div class="isResizable">hello'+  
                        '</div>';
                    tinyMCE.activeEditor.focus();
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, aHtml);

                }

            });

サイズを変更できるように、CSSを使用しました：

       .isResizable {
        background: rgba(255, 0, 0, 0.2);
        border: 1px solid black;
        overflow: hidden;
        resize: both;
        width: 160px;
        height: 120px;
    }

新しく挿入された div 要素をドラッグ可能にする方法を見つけようとしています。編集可能な状態を無効にしてドラッグ可能な状態を有効にする新しいボタンをtinymceインスタンスに追加することで、これを行う方法を知っている人はいますか?

上記のtinymceの初期化で作成された新しいボタンにjquery機能を追加できますか?

私の頭は今、壁から叩いて痛んでいるので、他の解決策はありがたいです。

ボタンで作成した div を次のように変更しました。

<div id ="cheese" class="isResizable" draggable="true" ondragstart="drag(event)">hello</div>

ページ上でドラッグ アンド ドロップするための JavaScript 関数が含まれています。

Draggable true が新しい div に表示されますが、ondragstart 部分が挿入されていないため、使用できません。

jQueryは必要ありません.css..duhhhhでdivの位置を絶対にするのを忘れていました!!