ドラッグ可能からエースエディタへのコピーDroppable

ドラッグ機能Ace Editorにドラッグ&ドロップ機能を追加しようとしています。私はこれを達成するためにjQuery Droppable関数を使用しています。ドラッグ機能が動作していて、エースエディタの領域も表示されます。ドロップ機能は現在動作していません。私のドロップ機能の目的は、ドラッグ可能なdivのテキストをAce Editor Areaにコピーすることです。ドロップ機能は、Ace Editorを使用していないときに動作します.DIVをドラッグ可能なDIVにドラッグすると、ドラッグ可能なコンテンツがそのままコピーされます。エディタでドラッグ可能なコンテンツが埋め込まれていないため、Aceでの実装には何かがあります。ここに私のコードです。私は今、1つのファイルにすべてを持っている、私はAceを少し良く理解した後にそれらを分離するつもりです。ドラッグ可能からエースエディタへのコピーDroppable

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <title>Code Block Project</title> 
 

 

 
    <style type="text/css" media="screen"> 
 

 
     #draggable { 
 
     width: 202; 
 
     height: 30px; 
 
     padding: 0.5em; 
 
     float: left; 
 
     margin: 10px 10px 10px 0; 
 
     border-style: solid; 
 
     border-width: 2px; 
 
     } 
 

 
     #droppable { 
 
     left: 0; 
 
     width: 600px; 
 
     height: 300px; 
 
     padding: 0.5em; 
 
     float: left; 
 
     margin: 10px; 
 
     } 
 

 
    </style> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
    <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"> 
 
    </script> 
 

 
    <script> 
 

 

 
    </script> 
 
    <script> 
 
     $(function() { 
 

 
     $("#draggable").draggable({ 
 
      revert: true 
 
     }); 
 

 
     $("#droppable").droppable({ 
 

 
      activeClass: "ui-state-default", 
 
      hoverClass: "ui-state-hover", 
 
      accept: ":not(.ui-sortable-helper)", 
 

 
      drop: function(event, ui) { 
 
      $(this).find(".ui-widget-header").remove(); 
 
      $("<p>").append(ui.draggable.contents().clone()).appendTo(this); 
 
      } 
 

 

 
     }); 
 

 
     var editor = ace.edit("droppable"); 
 
     editor.setTheme("ace/theme/monokai"); 
 
     editor.getSession().setMode("ace/mode/python"); 
 
     }); 
 

 
    </script> 
 

 

 
    </head> 
 

 
    <body> 
 

 
    <div id="droppable" class="ui-widget-header"> 
 
     <p> #Dragcodeblock </p> 
 
    </div> 
 

 
    <div id="draggable" class="ui-widget-content"> 
 
     <p> Hello World </p> 
 
    </div> 
 

 

 
    </body> 
 

 
</html>

出典

2016-07-28 SalceCodec

あなたが作品を表示するコード、それは隠されたDOMノードにテキストを追加しているので、それはちょうどあなたがエディタの値を変更したい場合は、editor.insert

を呼び出して、目に見える何もしません。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Code Block Project</title> 
 

 

 
    <style type="text/css" media="screen"> 
 
    #draggable, 
 
    #draggable2 { 
 
     width: 202; 
 
     height: 30px; 
 
     padding: 0.5em; 
 
     float: left; 
 
     margin: 10px 10px 10px 0; 
 
     border-style: solid; 
 
     border-width: 2px; 
 
    } 
 
    #droppable { 
 
     left: 0; 
 
     width: 600px; 
 
     height: 300px; 
 
     padding: 0.5em; 
 
     float: left; 
 
     margin: 10px; 
 
    } 
 
    </style> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
    <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"> 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div id="droppable" class="ui-widget-header"> 
 
    &lt;p> #Dragcodeblock &lt;/p> 
 
    </div> 
 

 
    <div id="draggable" class="ui-widget-content"> 
 
    <p>Hello World</p> 
 
    </div> 
 
    <div id=draggable2 draggable=true> 
 
    browser drag 
 
    </div> 
 
</body> 
 

 

 
<script> 
 
    $("#draggable").draggable({ 
 
    revert: true 
 
    }); 
 

 
    $("#droppable").droppable({ 
 

 
    activeClass: "ui-state-default", 
 
    hoverClass: "ui-state-hover", 
 
    accept: ":not(.ui-sortable-helper)", 
 

 
    drop: function(event, ui) { 
 
     var pos = editor.renderer.screenToTextCoordinates(event.clientX, event.clientY) 
 
     editor.session.insert(pos, ui.draggable.text()) 
 
     return true 
 
    } 
 

 

 
    }); 
 

 
    var editor = ace.edit("droppable"); 
 
    editor.setTheme("ace/theme/monokai"); 
 
    editor.getSession().setMode("ace/mode/python"); 
 

 
    document.getElementById("draggable2").addEventListener("dragstart", function(e) { 
 
    e.dataTransfer.setData("text/plain", this.textContent) 
 
    }); 
 
</script> 
 

 
</html>

あなたはまた、HTML5のドラッグ可能な属性を使用することができ、その場合、エースは自動的にカーソルを処理しますhttps://github.com/ajaxorg/ace/blob/master/lib/ace/mouse/dragdrop_handler.js

出典

2016-07-28 22:26:51

これは機能します！ありがとうございました。今私は、コードブロックをカーソルとインデントに従う方法を理解する必要があります。：/ – SalceCodec

ドラッグ可能からエースエディタへのコピーDroppable

答えて

関連する問題