tp-elements/tp-sortable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve item placement while dragging to work with all kindes of margins, paddings and gap styles.

Browse Source
This commit is contained in:
trading_peter
2026-04-26 22:46:59 +02:00
parent a3a8065c6a
commit 6cedfef000
2 changed files with 27 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-sortable", "name": "@tp/tp-sortable",
"version": "2.0.0", "version": "2.1.0",
"description": "", "description": "",
"main": "tp-sortable.js", "main": "tp-sortable.js",
"scripts": { "scripts": {

62
tp-sortable.js
View File

@@ -137,48 +137,33 @@ class TpSortable extends EventHelpers(LitElement) {
_moveSiblings() { _moveSiblings() {
const targetTop = this._rect.top + this._dy; const targetTop = this._rect.top + this._dy;
const targetHeight = this._rect.height; const targetHeight = this._rect.height;
const targetIdx = this._sortables.findIndex(item => item.el === this._target);
const itemsBefore = this._sortables.slice(0, targetIdx);
const itemsAfter = this._sortables.slice(targetIdx + 1);
const isTrackingDown = () => this._dy > 0; // Dragging down: items after target shift up to fill the target's original slot.
const itemsBeforeTarget = () => { // Each item's shift = distance from that item's original top to the preceding item's original top.
const idx = this._sortables.findIndex(item => item.el === this._target); for (let i = 0; i < itemsAfter.length; i++) {
return this._sortables.slice(0, idx); const item = itemsAfter[i];
} const prevTop = i === 0 ? this._rect.top : itemsAfter[i - 1].rect.top;
const shift = -(item.rect.top - prevTop);
const itemsAfterTarget = () => { if (targetTop + targetHeight > item.rect.top + item.rect.height * 0.5) {
const idx = this._sortables.findIndex(item => item.el === this._target); this._translate3d('0px', shift + 'px', '0px', item.el);
return this._sortables.slice(idx + 1);
}
if (isTrackingDown()) {
const items = itemsAfterTarget();
for (let i = 0, li = items.length; i < li; ++i) {
const item = items[i];
if (item.el !== this._target) {
if (targetTop + targetHeight > item.rect.top + (item.rect.height * 0.5)) {
this._translate3d('0px', -targetHeight + 'px', '0px', item.el);
}
if (targetTop + targetHeight < item.rect.top + (item.rect.height * 0.5)) {
this._translate3d('0px', '0px', '0px', item.el);
}
}
}
} else { } else {
const items = itemsBeforeTarget();
for (let i = 0, li = items.length; i < li; ++i) {
const item = items[i];
if (item.el !== this._target) {
if (targetTop - (item.rect.height * 0.5) > item.rect.top) {
this._translate3d('0px', '0px', '0px', item.el); this._translate3d('0px', '0px', '0px', item.el);
} }
}
if (targetTop - (item.rect.height * 0.5) < item.rect.top) { // Dragging up: items before target shift down to fill the target's original slot.
this._translate3d('0px', targetHeight + 'px', '0px', item.el); // Each item's shift = distance from that item's original top to the following item's original top.
} for (let i = 0; i < itemsBefore.length; i++) {
} const item = itemsBefore[i];
const nextTop = i === itemsBefore.length - 1 ? this._rect.top : itemsBefore[i + 1].rect.top;
const shift = nextTop - item.rect.top;
if (targetTop - item.rect.height * 0.5 < item.rect.top) {
this._translate3d('0px', shift + 'px', '0px', item.el);
} else {
this._translate3d('0px', '0px', '0px', item.el);
} }
} }
} }
@@ -227,9 +212,10 @@ class TpSortable extends EventHelpers(LitElement) {
el.style.position = el.style.position || 'relative'; el.style.position = el.style.position || 'relative';
el.style.transition = 'transform 300ms ease-in-out'; el.style.transition = 'transform 300ms ease-in-out';
el.style.zIndex = '0'; el.style.zIndex = '0';
const rect = el.getBoundingClientRect();
this._sortables.push({ this._sortables.push({
el: el, el: el,
rect: el.getBoundingClientRect() rect: rect
}); });
} }