我正在尝试在我的网站中使用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>
放下动作代码(咖啡文件)
$ ->
$.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>
我试图做一个小提琴,但是效果很好。
进行了更多挖掘。原来问题出在我的coffeescript上,因为turbolinks无法加载。该解决方案是将文档准备事件绑定到像这样页面的变化:
ready = ->
$.event.props.push 'dataTransfer'
# ...snip remainder of function...
$(document).on 'page:change', ready
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句