从 Draggable 复制到 Ace Editor Droppable

Question

我正在尝试将拖放功能添加到 Ace Editor. I'm using jQuery Droppable 函数以实现此目的。我有拖动功能，并且 Ace 编辑器区域也出现了。 Drop 功能目前无法使用。我对拖放功能的预期用途是将文本从可拖动的 div 复制到 Ace 编辑器区域。当我不使用 Ace Editor 时，拖放功能有效，就像我将 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>

Answer 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

从 Draggable 复制到 Ace Editor Droppable

Copying from Draggable to an Ace Editor Droppable

html

jquery

droppable

ace-editor