從Draggable複製到Ace編輯器Droppable

我正在嘗試添加Drag &將功能添加到Ace Editor。我正在使用jQuery Droppable函數來實現這一點。我的拖動功能正常工作，同時出現Ace Editor區域。 Drop功能目前不起作用。我的拖放功能的用途是將文本從可拖動div複製到Ace編輯區。當我不使用Ace編輯器時，拖放功能可以工作，就像我在拖動DIV到可拖放的DIV時複製可拖動的內容一樣。因此，由於編輯器沒有使用可拖動的內容填充，所以Ace的實現有些問題。這是我的代碼。我現在已經把所有的東西放在一個文件中，我打算將它們分開，只要我理解Ace好一點。從Draggable複製到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

從Draggable複製到Ace編輯器Droppable

回答

相關問題