如何使用 react.js 从列表拖放到树答案

【问题标题】：how to do drag and drop from list to tree using react.js如何使用 react.js 从列表拖放到树
【发布时间】：2018-11-27 06:22:20
【问题描述】：

我是 React 新手，我正在尝试实现拖放屏幕。

我在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>

提前致谢。

【问题讨论】：

您能否澄清“从列表到树”的含义。如果您正在寻找拖放功能，请查看上面的 documentation。
请看下面的例子
jsfiddle.net/Twisty/dLv7xk3t 在这里，他们可以通过拖放将“标签”添加到“树”的任何节点。我想用 react js 做同样的例子。谢谢。

标签： javascript reactjs drag-and-drop

【解决方案1】：

您提供的示例是用 jQuery 编写的。与其尝试让 jQuery UI 的 Draggable 在 React 中工作，不如使用 React DnD。这是一个基本上做同样事情的例子。

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

【讨论】：