Kopieren von Draggable zu einem Ace-Editor Droppable

Ich versuche, Drag & Drop-Funktionalität zu Ace Editor hinzuzufügen. Ich verwende jQuery Droppable Funktion, um dies zu erreichen. Ich habe die Drag-Funktionalität und der Ace Editor-Bereich erscheint ebenfalls. Die Drop-Funktion funktioniert derzeit nicht. Meine beabsichtigte Verwendung für die Drop-Funktion ist es, den Text vom ziehbaren Div in den Ace-Editor-Bereich zu kopieren. Die Drop-Funktion funktioniert, wenn ich nicht den Ace-Editor verwende, wie wenn ich ein DIV zu einem Drop-fähigen DIV ziehe, kopiert es den Inhalt des ziehbaren Objekts ganz gut. Es ist also etwas mit der Implementierung mit Ace los, da der Editor nicht mit dem ziehbaren Inhalt gefüllt wird. Hier ist mein Code. Ich habe jetzt alles in einer Datei, ich beabsichtige, sie zu trennen, sobald ich Ace ein bisschen besser verstehe.Kopieren von Draggable zu einem Ace-Editor 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>

Quelle

2016-07-28 SalceCodec

der Code, den Sie Werke zeigen, es tut einfach nichts sichtbar, da es sich um Text zu einem verborgenen dom Knoten hinzufügt, wenn Sie Editor Wert ändern möchten, rufen Sie 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>

Sie auch html5 ziehbar Attribut verwenden können, In diesem Fall handle Ace automatisch mit dem Cursor https://github.com/ajaxorg/ace/blob/master/lib/ace/mouse/dragdrop_handler.js

Quelle

2016-07-28 22:26:51

Es funktioniert! Vielen Dank. Jetzt muss ich herausfinden, wie der Code-Block dem Cursor und den Einrückungen folgen soll. : / – SalceCodec

Kopieren von Draggable zu einem Ace-Editor Droppable

Antwort

Verwandte Themen