Flex box "align-items" or "justify-content" causes smaller drop area  #1869

Activity

1. aquaductape commented on Jul 27, 2020

   

   aquaductape

   on Jul 27, 2020

   Last edited by aquaductape

   Author

   More actions

   Skimming through the source, the reason why the item is able to be detected by an empty sortable, is if the sortable doesn't have any children, then it will be added. However if the sortable has children, it fails the _ghostIsLast conditional, therefore the item isn't added to the sortable when dropping. Once the dragging item is below the half the sortable ( if direction set to "horizontal" ), then ghost item appears properly, then letting go the item is able to be added to the sortable because it passes the _ghostIsLast conditional.

   Sortable/src/Sortable.js

   Lines 1170 to 1195 in 88838bf

   	let elLastChild = lastChild(el, options.draggable);
   	if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) {
   	// If already at end of list: Do not insert
   	if (elLastChild === dragEl) {
   	return completed(false);
   	}
   	// assign target only if condition is true
   	if (elLastChild && el === evt.target) {
   	target = elLastChild;
   	}
   	if (target) {
   	targetRect = getRect(target);
   	}
   	if (onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
   	capture();
   	el.appendChild(dragEl);
   	parentEl = el; // actualization
   	changed();
   	return completed(true);
   	}
   	}

   This is a naive workaround, but this removes the second half of the animation of the target shared sortable. Only tested with simple sortables, no nested or multidrag stuff. Since my project deals with just simple drag and drop, I'm okay with losing that animation, since I gain the correct functional dropping over a non-empty sortable.

   let elLastChild = lastChild(el, options.draggable); 
   
   if(rootEl !== el) {
   	elLastChild = null
   }

   Here's a demo, it and test under Shared list section, it has three instead of two
2. waynevanson

   added

   environment:mouse

   bug

   on Aug 31, 2020
3. waynevanson commented on Aug 31, 2020

   

   waynevanson

   on Aug 31, 2020

   Contributor

   More actions

   @aquaductape Thanks for checking out the source!

   If you can make a PR, we can test it on the site to see if any of the tests and examples break in functionality.

   🎉React with 🎉1Reacted by Caleb Taylor
4. waynevanson

   added

   status:accepting-pulls

   on Aug 31, 2020
5. jjeff commented on Nov 1, 2020

   

   jjeff

   on Nov 1, 2020

   More actions

   Is this the same bug as #1942?
6. owen-m1

   removed

   environment:desktop

   status:accepting-pulls

   on Apr 3, 2021
7. owen-m1 commented on Jul 4, 2021

   

   owen-m1

   on Jul 4, 2021

   Member

   More actions

   Fixed in 1.14.0
8. owen-m1

   closed this as completedon Jul 4, 2021