从 Draggable 复制到 Ace Editor Droppable答案

【问题标题】：Copying from Draggable to an Ace Editor Droppable从 Draggable 复制到 Ace Editor Droppable
【发布时间】：2016-07-28 21:18:59
【问题描述】：

我正在尝试将拖放功能添加到 Ace Editor。我正在使用 jQuery Droppable 函数来实现这一点。我有拖动功能，并且 Ace 编辑器区域也出现了。 Drop 功能目前不工作。我对 drop 功能的预期用途是将文本从可拖动的 div 复制到 Ace 编辑器区域。当我不使用 Ace Editor 时，drop 功能起作用，就像当我将 DIV 拖动到可放置的 DIV 时，它会很好地复制可拖动的内容。因此，由于编辑器没有填充可拖动内容，因此使用 Ace 实现了一些问题。这是我的代码。我现在将所有内容都放在一个文件中，一旦我对 Ace 有了更好的了解，我打算将它们分开。

<!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>

【问题讨论】：

标签： jquery html ace-editor droppable

【解决方案1】：

您显示的代码有效，它只是没有做任何可见的事情，因为它将文本添加到隐藏的 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的可拖动属性，此时ace自动处理光标https://github.com/ajaxorg/ace/blob/master/lib/ace/mouse/dragdrop_handler.js

【讨论】：

有效！谢谢你。现在我需要弄清楚如何让代码块跟随光标和缩进。 ://