Expand Draggable Drop Zone | Skuid Support Community

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){   
   // 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);

Peter Herzog

1,674 Points

Posted 3 years ago

3 years ago

Gary Bailey

1,648 Points

I ran into the same issue and was able to resolve it by setting a min-height in the CSS for the droppable area as described in section "3" in this tutorial:
http://help.skuidify.com/m/11720/l/21...

From the Tutorial:

"The final step is to make some slight CSS tweaks. You may notice, if you're building sequentially right along with us, that if a Queue has no Items in it, it's no longer droppable! This is because its .nx-list-contents element, being empty, takes up no height on the screen. Therefore it is impossible for you to hover over it, and thus impossible to drop elements into it.

To fix this, we just have to give this element a minimum height. We do this using the CSS min-height property. We also extend this a little further so that, when the user actually hovers over an area, we extend the min-height even further to make the drop area even bigger."

.nx-queue .nx-list-contents {
min-height: 100px;
border-top: 0px;
box-shadow: 0px 0 0px #000;
}

.nx-queue .nx-list-contents.ui-state-highlight {
min-height: 100px;
}

Comment