Javascript Sortable - evt.from显示[object HTMLDivElement]

Question

在网站上使用以下功能，可以将元素从一列拖到另一列：https://github.com/RubaXa/Sortable 它不会将项目的新位置保存到数据库，而是在Javascript上写入时保存的列。

现在我的解决方案是根据文档来跟踪它被放置到另一列的时间：

onEnd: function (evt) {
   alert(evt.from);
}

这将从它移动的地方得到：

Evt.from 

现在，我正在尝试提醒它，它只显示：

[object HTMLDivElement]

如何将其转换为html或如何正确显示Sortable上的数据？

完整代码：

!function (t) {
    "use strict";
    t(document).ready(function () {
        t(".m-tasks__items").each(function () {
            Sortable.create(this, {
                group : ".m-tasks__items",
                sort : !0,
                handle : ".m-tasks__item-name",
                animation : 150,
                onEnd : function (evt) {
                    var r = evt.from;
                    //document.getElementById(evt.from).innerHTML;
                    console.log("Answer: " + evt.from);
                }
            })
        })
    })
} (jQuery);

HTML：

<div class="main-container m-tasks__container container-heading-bordered">
    <h2 class="container-heading">
      <span>Tasks (3)</span>
      <span class="container-heading-controls">
        <a href="#" class="iconfont iconfont-action-plus container-heading-control"></a>
      </span>
    </h2>
    <div class="container-body m-tasks__columns">
      <div class="m-tasks__column m-tasks__column--new">
        <div class="m-tasks__column-header">
      <span class="m-tasks__column-icon iconfont iconfont-task-label"></span>
          <span class="m-tasks__column-name">Pending</span>
        </div>

        <button class="btn btn-outline-success btn-block iconfont icon-left btn-lg m-tasks__add-card" type="button">
          Add new card <span class="btn-icon iconfont iconfont-plus"></span>
        </button>

        <div class="m-tasks__items m-tasks__column--new list-group">
        </div>
      </div>

      <div class="m-tasks__column m-tasks__column--in-progress list-group">
        <div class="m-tasks__column-header">
          <span class="m-tasks__column-icon iconfont iconfont-task-label"></span>
          <span class="m-tasks__column-name">In Progress</span>
        </div>
        <div class="m-tasks__items">
          No tasks         
        </div>
      </div>
      <div class="m-tasks__column m-tasks__column--completed list-group">
        <div class="m-tasks__column-header">
          <span class="m-tasks__column-icon iconfont iconfont-task-label"></span>
          <span class="m-tasks__column-name">Completed</span>
        </div>
        <div class="m-tasks__items">
               <div class="m-tasks__item list-group-item" draggable="false" style="">
            <div class="dropdown no-arrow control-dropdown m-tasks__item-control">
              <span class="dropdown-toggle iconfont iconfont-dots" data-toggle="dropdown"></span>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#" draggable="false">Edit</a>
                <a class="dropdown-item" href="#" draggable="false">Delete</a>
                <div class="dropdown-text">Set priority:</div>
                <div class="dropdown-radios">
                  <div>
                    <label class="custom-control custom-radio custom-radio-simple custom-radio-simple--danger">
                      <input type="radio" class="custom-control-input" name="radio">
                      <span class="custom-control-indicator"></span>
                      <span class="custom-control-description">High</span>
                    </label>
                  </div>
                  <div>
                    <label class="custom-control custom-radio custom-radio-simple custom-radio-simple--success">
                      <input type="radio" class="custom-control-input" name="radio">
                      <span class="custom-control-indicator"></span>
                      <span class="custom-control-description">Medium</span>
                    </label>
                  </div>
                  <div>
                    <label class="custom-control custom-radio custom-radio-simple custom-radio-simple--secondary">
                      <input type="radio" class="custom-control-input" name="radio" checked="">
                      <span class="custom-control-indicator"></span>
                      <span class="custom-control-description">Normal</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <h6 class="m-tasks__item-name">Title 3</h6>
            <div class="m-tasks__item-desc">
             desc 3            </div>
            <span class="m-tasks__item-date">12-12-12</span>

                        <span class="m-tasks__item-priority iconfont iconfont-task-bell m-tasks__item-priority--medium"></span>
                      </div><div class="m-tasks__item list-group-item" style="">
            <div class="dropdown no-arrow control-dropdown m-tasks__item-control">
              <span class="dropdown-toggle iconfont iconfont-dots" data-toggle="dropdown"></span>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Edit</a>
                <a class="dropdown-item" href="#">Delete</a>
                <div class="dropdown-text">Set priority:</div>
                <div class="dropdown-radios">
                  <div>
                    <label class="custom-control custom-radio custom-radio-simple custom-radio-simple--danger">
                      <input type="radio" class="custom-control-input" name="radio">
                      <span class="custom-control-indicator"></span>
                      <span class="custom-control-description">High</span>
                    </label>
                  </div>
                  <div>
                    <label class="custom-control custom-radio custom-radio-simple custom-radio-simple--success">
                      <input type="radio" class="custom-control-input" name="radio">
                      <span class="custom-control-indicator"></span>
                      <span class="custom-control-description">Medium</span>
                    </label>
                  </div>
                  <div>
                    <label class="custom-control custom-radio custom-radio-simple custom-radio-simple--secondary">
                      <input type="radio" class="custom-control-input" name="radio" checked="">
                      <span class="custom-control-indicator"></span>
                      <span class="custom-control-description">Normal</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <h6 class="m-tasks__item-name">Title 2</h6>
            <div class="m-tasks__item-desc">
             desc 2            </div>
            <span class="m-tasks__item-date">12-12-12</span>

                        <span class="m-tasks__item-priority iconfont iconfont-task-bell m-tasks__item-priority--normal"></span>
                      </div>


        </div>
        <div class="m-tasks__empty-column">
          <img src="img/tasks/empty.png" alt="">
          <div class="m-tasks__empty-column-text">Drag items here or <br> <a href="#" class="link-info">Create New</a></div>
        </div>
      </div>
    </div>
  </div>