From 415506bf3efb0fd54c067e2863876586d23edce5 Mon Sep 17 00:00:00 2001 From: Yopai Date: Wed, 5 May 2021 11:22:22 +0200 Subject: [PATCH 1/3] README : trick for emptyInsertThreshold Give a pure-css workaround to emptyInsertThreshold option. --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 6beb663c7..a2dd09803 100644 --- a/README.md +++ b/README.md @@ -521,6 +521,19 @@ The distance (in pixels) the mouse must be from an empty sortable while dragging Demo: https://jsbin.com/becavoj/edit?js,output +Instead of this, you can just set a padding on your list when it is empty. Warning, for :empty to work, it must have no node inside (even text one). +(It will help if your lists are side-by-side, since you only want the drag occurs when you are under the list - not at the left) + +Adding a CSS rule : +`ul:empty { + background:pink; + padding-bottom:3em; +}` + +And rewriting the empty list as : `` (so that it is really empty) + +You got : +https://jsbin.com/galujuvayi/edit?html,css,js,output --- ### Event object ([demo](https://jsbin.com/fogujiv/edit?js,output)) From a1015e2fd4404eb93ad05cc7b8778b43b49c9373 Mon Sep 17 00:00:00 2001 From: Owen M Date: Sat, 26 Jun 2021 23:03:34 -0400 Subject: [PATCH 2/3] Update README.md --- README.md | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a2dd09803..6ff615abb 100644 --- a/README.md +++ b/README.md @@ -521,19 +521,16 @@ The distance (in pixels) the mouse must be from an empty sortable while dragging Demo: https://jsbin.com/becavoj/edit?js,output -Instead of this, you can just set a padding on your list when it is empty. Warning, for :empty to work, it must have no node inside (even text one). -(It will help if your lists are side-by-side, since you only want the drag occurs when you are under the list - not at the left) - -Adding a CSS rule : +An alternative to this option would be to set a padding on your list when it is empty. +For example: `ul:empty { - background:pink; - padding-bottom:3em; + padding-bottom: 20px; }` -And rewriting the empty list as : `` (so that it is really empty) +Warning: For :empty to work, it must have no node inside (even text one). -You got : -https://jsbin.com/galujuvayi/edit?html,css,js,output +Demo: +https://jsbin.com/yunakeg/edit?html,css,js,output --- ### Event object ([demo](https://jsbin.com/fogujiv/edit?js,output)) From 7d0c6a062ca1929c71778e044b2d815a2e51fae0 Mon Sep 17 00:00:00 2001 From: Owen M Date: Sat, 26 Jun 2021 23:10:03 -0400 Subject: [PATCH 3/3] Update README.md --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6ff615abb..f56ae451c 100644 --- a/README.md +++ b/README.md @@ -522,12 +522,15 @@ The distance (in pixels) the mouse must be from an empty sortable while dragging Demo: https://jsbin.com/becavoj/edit?js,output An alternative to this option would be to set a padding on your list when it is empty. + For example: -`ul:empty { +```css +ul:empty { padding-bottom: 20px; -}` +} +``` -Warning: For :empty to work, it must have no node inside (even text one). +Warning: For `:empty` to work, it must have no node inside (even text one). Demo: https://jsbin.com/yunakeg/edit?html,css,js,output