如何使用react.js在列表和树之间拖放

Question

我是一个新的反应，我正在尝试实现一个拖放屏幕。

我在jsFiddle上找到了一个使用jQuery的在线示例。我将代码复制到这里作为一个可运行的演示，因为我不能在没有代码示例的情况下将链接发布到jsFiddle。

关于如何在ReactJS中做类似的事情，有人能给我指出正确的方向吗？

​

var exData = [{
  id: "loc1",
  parent: "#",
  text: "Location 1"
}, {
  id: "loc2",
  parent: "#",
  text: "Location 2"
}, {
  id: "italy-1",
  parent: "loc2",
  text: "Italy",
  icon: "fa fa-flag"
}, {
  id: "poland-1",
  parent: "loc2",
  text: "Poland",
  icon: "fa fa-flag"
}];

function makeTreeItem(el) {
  return $("<a>", {
    id: $(el).attr("id") + "_anchor",
    class: "jstree-anchor",
    href: "#"
  });
}

$(function() {
  $('#tree').jstree({
    core: {
      check_callback: true,
      data: exData
    },
    types: {
      root: {
        icon: "fa fa-globe-o"
      }
    },
    plugins: ["dnd", "types"]
  });
  $('#tagList li').draggable({
    cursor: 'move',
    helper: 'clone',
    start: function(e, ui) {
      var item = $("<div>", {
        id: "jstree-dnd",
        class: "jstree-default"
      });
      $("<i>", {
        class: "jstree-icon jstree-er"
      }).appendTo(item);
      item.append($(this).text());
      var idRoot = $(this).attr("id").slice(0, -2);
      var newId = idRoot + "-" + ($("#tree [id|='" + idRoot + "'][class*='jstree-node']").length + 1);
      return $.vakata.dnd.start(e, {
        jstree: true,
        obj: makeTreeItem(this),
        nodes: [{
          id: newId,
          text: $(this).text(),
          icon: "fa fa-flag-o"
        }]
      }, item);
    }
  });
});

#tagList ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tagList ul li {
  background: #fff;
  border: 1px solid #ccc;
  width: auto;
  display: inline-block;
  padding: .125em .2em;
  margin: 3px 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div class="ui-widget">
  <div class="ui-widget-header">
    Tags
  </div>
  <div id="tagList">
    <ul>
      <li data-tag="1" id="uk-1">United Kingdom</li>
      <li data-tag="2" id="france-1">France</li>
      <li data-tag="3" id="germany-1">Germany</li>
    </ul>
  </div>
</div>
<div class="ui-widget">
  <div class="ui-widget-header">
    Tree
  </div>
  <div id="tree">
  </div>
</div>

​

提前谢谢。

Answer 1

您提供的示例是用jQuery编写的。您应该使用React DnD，而不是尝试在React中使用jQuery UI的可拖动功能。这是一个从根本上做完全相同事情的例子。

http://react-dnd.github.io/react-dnd/examples/nesting/drop-targets