0
JSFiddleのリストを展開します。https://jsfiddle.net/bkfxjnom/4/のsetTimeoutとjQuery UI-ドラッグ可能/ドロップ可、ここでホバー
を私はsetTimeoutをがdroppable.overで正常に動作するのに問題を抱えています。 1つのドロップ可能から他のドロップ可能に移動するときに、ランダムに機能をオフにするように見えるだけです。一方、私がドロップ可能領域を出て、別のドロップ可能領域に戻ると、意図したとおりに動作するように見えます。私はdroppables間を移動するときに、オーバーイベントとアウトイベントの間にいくつかの競合があると仮定しています。修正の助けがあれば幸いです。誰もが同じ問題持って、たまたまその場合
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');
}
});
}
}
});