Question

我正在尝试添加Drag＆amp;将功能放到Ace Editor。我正在使用jQuery Droppable函数来实现这一目标。我有Drag功能工作，Ace Editor区域也出现了。 Drop功能目前无法正常工作。我对drop功能的用途是将可拖动div中的文本复制到Ace Editor区域。当我不使用Ace Editor时，drop函数会起作用，就像我将DIV拖到可放置的DIV时，它会复制draggable的内容就好了。因此，由于编辑器没有填充可拖动内容，因此使用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

＆＃13;

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

＆＃13;

您还可以使用html5 draggable属性，在这种情况下，ace自动处理光标https://github.com/ajaxorg/ace/blob/master/lib/ace/mouse/dragdrop_handler.js

从可拖动复制到Ace编辑器Droppable

1 个答案: