0
擴大名單
的jsfiddle這裏：https://jsfiddle.net/bkfxjnom/4/setTimeout和jQuery UI的，可拖動/可棄懸停
我遇到了麻煩的setTimeout與droppable.over正常工作。它似乎只是從一個droppable移動到另一個時，隨機啓動該功能。雖然如果我退出可投放區域並返回到其他可投放區域，那麼它似乎按預期工作。我假設在droppables之間移動時over和out事件之間會有一些衝突。任何有關修復的幫助表示讚賞。
var globalTimer;
$('li.category-droppable').droppable({
tolerance: 'pointer',
out: function (event, ui) {
clearTimeout(globalTimer);
if ($(this).attr('id') == 'level2') {
$(this).find('ul:first').slideUp();
$(this).find('span.glyphicon:first').toggleClass("glyphicon-chevron-right").toggleClass('glyphicon-chevron-down');
}
},
over: function (event, ui) {
console.log($(this).attr('id'));
event.stopPropagation();
$(this).find('ul:first').slideDown();
if ($(this).attr('id') == 'level3') {
if (!$(this).is(active)) {
current = $(this);
active.removeClass('list-group-item-info');
current.addClass('list-group-item-info');
globalTimer = setTimeout(function() {
current.addClass('active');
active.removeClass('active');
active = current;
if (showing) {
showing.hide()
}
load_category(current.html(), $('#' + current.attr('name')).find("ul:first"));
$('#' + current.attr('name')).show();
showing = $('#' + current.attr('name'));
}, 500);
}
} else if ($(this).attr('id') == 'level1' || $(this).attr('id') == 'level2') {
$(this).find('span.glyphicon:first').toggleClass("glyphicon-chevron-right").toggleClass('glyphicon-chevron-down');
}
},
drop: function (event, ui) {
clearTimeout(globalTimer);
if ($(this).attr('id') == 'level3') {
update_category($(ui.draggable).attr('id'), $(this).html())
$(ui.draggable).attr("style", "display: none");
$(ui.draggable).detach().prependTo($('#' + $(this).attr('name')).children('ul'));
$(ui.draggable).fadeIn();
$(ui.draggable).draggable({
helper: 'clone',
appendTo: "body",
zIndex: 100,
refreshPositions: true,
revert: 'invalid',
start: function (event, ui) {
$(this).css('visibility','hidden');
},
stop: function (event, ui) {
$(this).css('visibility','visible');
}
});
}
}
});