拖放：拖放仅适用于刷新答案

【问题标题】：Drag and Drop: drop only works on refresh拖放：拖放仅适用于刷新
【发布时间】：2014-06-15 01:36:53
【问题描述】：

我正在尝试在我的网站中使用 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，但效果很好。

如何在无需刷新的情况下使放置操作生效？

【问题讨论】：

标签： jquery ruby-on-rails html drag-and-drop jstree

【解决方案1】：

做了更多的挖掘。原来问题是我的咖啡脚本由于 turbolinks 而没有加载。 solution 是将文档就绪事件绑定到页面更改，如下所示：

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

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

【讨论】：