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:
(function(skuid){ <br> // Global setting -- if true, then all changes will be immediately saved,<br> // otherwise, changes will remain unsaved until you click Save.<br> var SAVE_IMMEDIATELY = true;<br> <br> var $ = skuid.$;<br> <br> var getQueueList = function(queueElement){<br> var queueList;<br> $.each(skuid.model.list(),function(i,model){<br> $.each(model.registeredEditors,function(){<br> if (this.element && this.element.is && this.element.is(queueElement)) {<br> queueList = this.lists.0];<br> return false;<br> } <br> });<br> if (queueList) return false;<br> });<br> return queueList;<br> };<br> <br> $(document.body).one('pageload',function(){<br> $('.nx-queue').each(function(){<br> var queue = $(this);<br> var listContents = queue.find('.nx-list-contents');<br> listContents.droppable({<br> hoverClass: 'ui-state-highlight',<br> accept: function(draggables) {<br> // Do not accept draggables<br> // that came from this list<br> return (!listContents.is($(draggablesg0]).data('listContents')));<br> },<br> drop: function(e,ui){<br> var draggable = ui.draggable;<br> <br> var sourceItem = draggable.parent().data('object');<br> <br> // You will get a jQUery UI bug unless you detach the draggable.<br> // We wait until now to detach in order to get a <br> draggable.detach();<br> <br> var sourceRow = sourceItem.row;<br> var sourceRowId = sourceRow.Id;<br> var sourceList = sourceItem.list;<br> var sourceModel = sourceItem.list.model;<br> var sourceModelCondition = sourceModel.conditionsi0];<br> <br> var targetList = getQueueList(queue);<br> var targetModel = targetList.model;<br> <br> targetModel.adoptRow(sourceRow);<br> sourceModel.removeRowById(sourceRowId);<br> <br> var targetRow = targetModel.getRowById(sourceRowId);<br> <br> // Find the first Condition in our target Model,<br> // and apply it to our target row.<br> // (that is, change the Stage of the dragged Opportunity)<br> var targetModelCondition = targetModel.conditionsi0];<br> try {<br> skuid.events.publish('queue-reload');<br> if(sourceModel.objectName === "Client_Service__c") {<br> var newMonths;<br> <br> // replace existing month with new month<br> if(targetRow.Months__c.indexOf(sourceModelCondition.value + ';') > -1) {<br> newMonths = targetRow.Months__c.replace(sourceModelCondition.value + ';', targetModelCondition.value + ';');<br> } else {<br> newMonths = targetRow.Months__c.replace(sourceModelCondition.value, targetModelCondition.value);<br> }<br> console.log(newMonths);<br> // Update month field with newly modified month values<br> targetModel.updateRow(<br> targetRow,<br> {Months__c:newMonths}<br> );<br> targetModel.save({callback: function(result){<br> if (result.totalsuccess) {<br> console.log('success!');<br> } else {<br> console.log(result.insertResults);<br> console.log(result.updateResults);<br> console.log(result.deleteResults); <br> }<br> }});<br> console.log('SAVED!');<br> <br> } else {<br> targetModel.updateRow(<br> targetRow,<br> targetModelCondition.field,<br> targetModelCondition.value<br> );<br> }<br> } catch(e) {<br> console.log(e);<br> }<br> <br> if (SAVE_IMMEDIATELY) {<br> // $.blockUI({<br> // message: 'Saving Changes...'<br> // });<br> //targetModel.save({callback: $.unblockUI()});<br> }<br> <br> // Re-render just the Source List and the Target List<br> sourceList.render();<br> targetList.render();<br> <br> }<br> });<br> });<br> });<br> <br>})(skuid);