拖放：拖放仅适用于刷新

Question

我试图使用HTML5拖放在我的网站。dragstart和dragend被解雇，但dragenter，draglet，dragover和下降不工作，直到我刷新页面。

侧边栏中树中的节点应该能够拖动到表中的单元格。树是用jsTree制作的。我已经在火狐、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>

删除操作代码（咖啡脚本文件）

$ ->
    $.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>

我试着拉小提琴，但效果很好。

Answer 1

又挖了一些。原来问题是由于turbolinks，我的咖啡脚本没有加载。解决方案是将document ready事件绑定到页面更改，如下所示：

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

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