I'm using jquery UI to make an interface with drag and drop, which works perfectly, the only problem is that in the first click on a draggable element I get a:
Uncaught ReferenceError: highlight is not defined
and it does not work, but curiously in the 2nd click if it works perfectly. Has anyone ever happened to you or do you know why this happens?
My code:
$(".taskRecipient").draggable({
revert: "invalid",
refreshPositions: true,
start: function(e, ui){
var state = "";
$(this).ui-state-highlight;
},
stop: function(e, ui){
$(ui.draggable).remove();
$('.primero').removeClass("ui-state-active");
$('.segundo').removeClass("ui-state-active");
$('.tercero').removeClass("ui-state-active");
$('.cuarto').removeClass("ui-state-active");
}
});
$(".col-lg-3").droppable({
greedy: true,
classes: {
"ui-droppable-active": "ui-state-active",
"ui-droppable-hover": "ui-state-hover",
},
drop: function(event, ui){
$('.primero').removeClass("ui-state-active");
$('.segundo').removeClass("ui-state-active");
$('.tercero').removeClass("ui-state-active");
$('.cuarto').removeClass("ui-state-active");
var taskId = ui.draggable.data('task');
var parentId = $(this).attr('id');
$(this).removeClass('ui-state-hover');
$(this).removeClass('ui-state-active');
ui.draggable.removeClass('ui-state-hover');
ui.draggable.removeClass('ui-state-active');
$.ajax({
url: base_url + 'Task/changeTaskParent',
type: "post",
data: {
'parent' : parentId,
'taskId' : taskId
},
success: function(){
},
error: function(){
}
});
},
});