Column drag handle does not update when over nodrop column

[Igerson]

Hello

When trying to drag column for reordering, then small handle appears representing dragged column (see picture of it: https://ibb.co/8L1SsgBt). When column is dragged on position where it cannot be dropped, f.x. target column has

Code: [Select]

nodrop: true, I expected that handle will update its state, replacing icon on it to represent that column cannot be dropped here, but it seems not a case, it still shows that column can be dropped in prohibited place, but when I release mouse button - nothing happens. My intention was to provide visual feedback to user, where column can be dropped and where is not. Does PQGrid has some API or tools to acheve that? I implemented columnDrag event handler, which updates table header columns model with nodrop properties once column start being dragged

I dig a source code a bit trying to find answer, but without much success, but I found piece of code, which seems to be responsible for nodrop handling, and it appears to be empty (see picture https://ibb.co/mCsHRypQ)

So, my question is, can I somehow update drag handle to provide feedback where column can be dragged and where not?

Thanks in advance

[paramvir]

Thanks for reporting the issue.

Handle is supposed to update its state according to its position above the column. It seems like a bug. I would provide the patch if feasible. It would be fixed in upcoming version if not patchable.

[Igerson]

Great!

If patch is possible, let me know, so I can apply it until it get fixed in upcoming release(s)

Thank you very much.

[paramvir]

This patch can be used to fix the issue.

Code: [Select]

var p=jQuery.paramquery.cDragColumns.prototype;jQuery.paramquery.cDragColumns=function(e){var r,o,t=this,a=e.options,n=a.dragColumns||{},d=function(r,o){return $("<div class='pq-arrow-"+r+" ui-icon "+o+"'></div>").appendTo(e.$grid_center)};t.that=e,t.rtl=a.rtl,t.status="stop",t.$arrowTop=d("down",n.topIcon),t.$arrowBottom=d("up",n.bottomIcon),t.hideArrows(),n.enabled&&e.$head_i.draggable({distance:5,cursorAt:{top:-10,left:-10},cancel:".pq-grid-header-search-row,input,textarea,button,select,option,.pq-grid-number-cell",zIndex:"1000",appendTo:"body",revert:t.revert.bind(t),helper:function(o,a){var n=o.target.closest(".pq-grid-col");if(n){var d,c=t.colIndicesDrag=e.getHeadIndices(n),i=t.columnDrag=c.column,l=i.parent,p=e.options.dragColumns.rejectIcon,s=e.getScale();return r=pq.getScale(document.body),!i||i.nodrag||i._nodrag||l&&1==l.colSpan||i.empty||!1===e._trigger("columnDrag",o,{column:i})?"<span/>":(e.$head_i.find(".pq-grid-col-resize-handle").hide(),(d=t.$helper=$("<div class='pq-col-drag-helper pq-theme pq-grid-cell' data-di="+i.dataIndx+" ><div><span class='pq-drag-icon ui-icon "+p+"'></span>"+i.pq_title+"</div></div>")).css({scale:s[0]/r[0]+" "+s[1]/r[1]}),d[0])}return $("<div></div>")},start:function(){},drag:function(a,n){if(t.$helper){t.status="drag";var d,c=n.position,i=a.originalEvent,l=(i&&i.target!=document?i.target:a.target).closest(".pq-grid-col"),p=t.colIndicesDrag,s=p.ri,g=p.column,u=g.leftPos,h=u+g.o_colspan;if(c.left=c.left/r[0],c.top=c.top/r[1],console.log("cDragColumn.js td = ",l),l&&!l.closest(".pq-grid-header-search-row")&&e.evtBelongs(i)){var m=e.getHeadIndices(l),v=m.column,f=m.ri,q=m.colIndx;if(!(v.empty||v==g||v.nodrop||v._nodrop||s<f&&q>=u&&q<h))return o=l,t.colIndicesDrop=m,void t.onDrag(a,l);o!=l&&t.updateDragHelper(!1),o=l}else t.hideArrows(),d=$(".ui-droppable-hover",e.$top),console.log("cGroup.js $group = ",d[0]),t.updateDragHelper(!!d[0]);t.colIndicesDrop=null}},stop:function(r){if(t.status="stop",t.$helper){t.hideArrows();var o=t.colIndicesDrop;e.$head_i.find(".pq-grid-col-resize-handle").show(),o&&t.onDrop(t.colIndicesDrag,o,r)}}})},jQuery.paramquery.cDragColumns.prototype=p;