Fix #1883: Orderlist Drag and Drop (#3667)

primefaces · Nov 17, 2022 · b42ed2b · b42ed2b
1 parent a6309d6
commit b42ed2b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/components/lib/orderlist/OrderList.css b/components/lib/orderlist/OrderList.css
@@ -49,3 +49,11 @@
 .p-orderlist.p-state-disabled .p-orderlist-list {
     overflow: hidden;
 }
+
+.p-orderlist .p-orderlist-droppoint {
+    height: 0.5rem;
+}
+
+.p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {
+    background: var(--primary-color);
+}
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
@@ -92,8 +92,13 @@ export const OrderListSubList = React.memo((props) => {
                 const key = JSON.stringify(item);
 
                 if (props.dragdrop) {
-                    let items = [
-                        createDropPoint(i, key + '_droppoint'),
+                    let items = [];
+
+                    if (i === 0) {
+                        items.push(createDropPoint(item, i, key + '_droppoint_start'));
+                    }
+
+                    items.push(
                         <li
                             key={key}
                             className={itemClassName}
@@ -109,11 +114,9 @@ export const OrderListSubList = React.memo((props) => {
                             {content}
                             <Ripple />
                         </li>
-                    ];
+                    );
 
-                    if (i === props.value.length - 1) {
-                        items.push(createDropPoint(item, i, key + '_droppoint_end'));
-                    }
+                    items.push(createDropPoint(i, key + '_droppoint'));
 
                     return items;
                 } else {