拖放：drop仅适用于刷新

Question

我试图在我的网站中拖放HTML5。 dragstart和dragend被解雇了，但dragenter，dragleave，dragover和drop不会工作，直到我刷新页面。

侧栏中树的节点应该能够拖动到表格中的单元格。树由jsTree制作。我已经尝试过Firefox，Chrome和IE。他们都有相同的行为。

补充工具栏（rhtml文件）

<section id="navbar-jstree">
</section>

<script>
  $(function () {
    $('#navbar-jstree')
      .on('select_node.jstree', loadDetails)
      .on('after_open.jstree', addAttributes)
      .jstree({ 
      'core' : {
        'data' : { 
          'url' : function (node) {
            return node.id === '#' ?
              '/nav_trees.json' :
              '/nav_trees/' + node.id + '.json';
          },
          'data' : function (node) {
            return {'id': node.id};
          }
        },
        'themes' : {"dots" : false}
      },
      'plugins' : ['types'] 
    });

    function addAttributes(e, data) {
      $('#' + data.node.id + ' ul > li').each(function(idx, elem) {
        var node = $(elem);
        var node_id = node.attr('id') % 1e8;
        if (isItem(node_id)) {
          node
            .attr('draggable', 'true')
            .on('dragstart', function(e){
              $(this).addClass('dragged');
              e.originalEvent.dataTransfer.effectAllowed = 'copy';
              var nodeData = { name: $(this).text(), id: $(this).attr('id') };
              e.originalEvent.dataTransfer.setData('text/plain', JSON.stringify(nodeData));
          }).on('dragend', function(e) {
              $(this).removeClass('dragged');
          });
        }
      });
    }
  });
</script>

删除操作代码（coffeescript文件）

$ ->
    $.event.props.push 'dataTransfer'

    handleDragEnter = -> $(this).addClass 'droppable'
    handleDragLeave = -> $(this).removeClass 'droppable'
    handleDragOver = (e) ->
        e.preventDefault()
        e.originalEvent.dataTransfer.dropEffect = 'copy'
        false
    handleDrop = (e) ->
        e.stopPropagation()
        e.preventDefault()
        $(this).removeClass 'droppable'
        nodeDataStr = e.dataTransfer.getData 'text/plain'
        nodeData = JSON.parse nodeDataStr
        column = $(this).index() + 1
        data =
            text: nodeData.name
            node_id: nodeData.id
            start: $('.scheduler .th:nth-child(' + column + ')').text()
            user_id: $(this).parents('.scheduler-row').prev().data('id')
        $.post '/events', data
        false

    $('.scheduler-row td')
        .on('dragenter', handleDragEnter)
        .on('dragover', handleDragOver)
        .on('dragleave', handleDragLeave)
        .on('drop', handleDrop)

表格（页面来源）

<div class="scheduler table">
    <div class="thead">
      <div class="tr">
        <div class="th">2014-06-09</div>
        <div class="th">2014-06-16</div>
        <div class="th">2014-06-23</div>
        <div class="th">2014-06-30</div>
        <div class="th">2014-07-07</div>
        <div class="th">2014-07-14</div>
        <div class="th">2014-07-21</div>
      </div>
    </div>
    <table cellspacing="0">
      <tbody>
        <tr>
          <th scope="row" data-id="1">Eva Ogbe</th>
          <td class="scheduler-row">
            <table class="table" cellspacing="0">
              <tbody>
                <tr>
                  <td class=""></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

我尝试做fiddle，但效果很好。

如何让drop动作无需刷新？

Answer 1

进行了更多挖掘。事实证明问题在于我的coffeescript因为turbolinks没有加载。 solution是将文档就绪事件绑定到页面更改，如下所示：

ready = ->
    $.event.props.push 'dataTransfer'
    # ...snip remainder of function...

$(document).on 'page:change', ready