Draggable에서 Ace Editor로 복사 Droppable

Ace Editor에 Drag & Drop 기능을 추가하려고합니다. 나는 이것을 달성하기 위해 jQuery Droppable 함수를 사용하고있다. 드래그 기능이 작동하고 에이스 편집기 영역도 나타납니다. 놓기 기능이 현재 작동하지 않습니다. 드롭 기능에 대한 내 의도적 인 사용은 드래그 가능한 div의 텍스트를 에이스 편집기 영역으로 복사하는 것입니다. 드롭 기능은 Ace Editor를 사용하지 않을 때 작동합니다. DIV를 드래그 가능한 DIV로 드래그하면 드래그 가능한 내용이 잘 복사됩니다. 에디터가 드래그 가능한 내용으로 채워지지 않기 때문에 Ace로 구현 한 것입니다. 여기 내 코드가있다. 지금은 하나의 파일에 모든 것을 가지고 있습니다. Ace를 조금 더 잘 이해하면 그들을 구분하려고합니다.Draggable에서 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>

출처

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 Editor로 복사 Droppable

답변

관련 문제