We are using draggable with multiple queues - so that users can drag-and-drop records between queues. Quite often our users have trouble getting queue items into the "drop zone" (my term) to move a record into a new queue. Is there a way to increase the size (specifically the height) of the drop zone?
Using this code for draggable:
Using this code for draggable:
(function(skuid){
// Global setting -- if true, then all changes will be immediately saved,
// otherwise, changes will remain unsaved until you click Save.
var SAVE_IMMEDIATELY = true;
var $ = skuid.$;
var getQueueList = function(queueElement){
var queueList;
$.each(skuid.model.list(),function(i,model){
$.each(model.registeredEditors,function(){
if (this.element && this.element.is && this.element.is(queueElement)) {
queueList = this.lists[0];
return false;
}
});
if (queueList) return false;
});
return queueList;
};
$(document.body).one('pageload',function(){
$('.nx-queue').each(function(){
var queue = $(this);
var listContents = queue.find('.nx-list-contents');
listContents.droppable({
hoverClass: 'ui-state-highlight',
accept: function(draggables) {
// Do not accept draggables
// that came from this list
return (!listContents.is($(draggables[0]).data('listContents')));
},
drop: function(e,ui){
var draggable = ui.draggable;
var sourceItem = draggable.parent().data('object');
// You will get a jQUery UI bug unless you detach the draggable.
// We wait until now to detach in order to get a
draggable.detach();
var sourceRow = sourceItem.row;
var sourceRowId = sourceRow.Id;
var sourceList = sourceItem.list;
var sourceModel = sourceItem.list.model;
var sourceModelCondition = sourceModel.conditions[0];
var targetList = getQueueList(queue);
var targetModel = targetList.model;
targetModel.adoptRow(sourceRow);
sourceModel.removeRowById(sourceRowId);
var targetRow = targetModel.getRowById(sourceRowId);
// Find the first Condition in our target Model,
// and apply it to our target row.
// (that is, change the Stage of the dragged Opportunity)
var targetModelCondition = targetModel.conditions[0];
try {
skuid.events.publish('queue-reload');
if(sourceModel.objectName === "Client_Service__c") {
var newMonths;
// replace existing month with new month
if(targetRow.Months__c.indexOf(sourceModelCondition.value + ';') > -1) {
newMonths = targetRow.Months__c.replace(sourceModelCondition.value + ';', targetModelCondition.value + ';');
} else {
newMonths = targetRow.Months__c.replace(sourceModelCondition.value, targetModelCondition.value);
}
console.log(newMonths);
// Update month field with newly modified month values
targetModel.updateRow(
targetRow,
{Months__c:newMonths}
);
targetModel.save({callback: function(result){
if (result.totalsuccess) {
console.log('success!');
} else {
console.log(result.insertResults);
console.log(result.updateResults);
console.log(result.deleteResults);
}
}});
console.log('SAVED!');
} else {
targetModel.updateRow(
targetRow,
targetModelCondition.field,
targetModelCondition.value
);
}
} catch(e) {
console.log(e);
}
if (SAVE_IMMEDIATELY) {
// $.blockUI({
// message: 'Saving Changes...'
// });
//targetModel.save({callback: $.unblockUI()});
}
// Re-render just the Source List and the Target List
sourceList.render();
targetList.render();
}
});
});
});
})(skuid);