I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity
I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>
Related
I'm new to the community, also pretty new in this world of web programming, this is the issue that is driving me nuts,
I tried this code to add a class when I hover the ul list element, so I can display the nav element, but instead of open only the hovered dropdown menu, it displays all the ul element with the class I selected.
Here is the Jquery code:
$(document).ready(function() {
$("ul").hover(function() {
$(this)
.find(".dropdown-list")
.toggleClass("dropdown-menu");
});
});
and these are the element targered in my html file:
<ul class="header-nav-responsive">
<li>HOME</li>
<li>
LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>
FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
Here is the CSS snippet:
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu, .nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0,0,0,.1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu, .nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li, .nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a, .nav-icons-big-screen .dropdown-menu li a{
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover, .nav-icons-big-screen .dropdown-menu li a:hover {
color:#2250fc;
}
At last, you can see how the page display in this link: https://patricio1984.github.io/Polo-template-emulation/
Thanks so much to all in advance! cheers!
The problem is because you are adding the event listener to the ul tag(This includes the parent ul too). Instead, you should have an event listener to the li, say with the class 'menu-item' and toggle the class based on that.
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
Here is the fiddle link https://jsfiddle.net/eskcrd3n/
Actually your issue here is lies under your main selector. You did go for listening to ul whilst you should listen to li elements. So whenever you listening to ul, the $(this) will refer to <ul class="header-nav-responsive"> so all your elements with class dropdown-list will be called for the trigger event.
$(document).ready(function() {
$("li").hover(function() {
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu,
.nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0, 0, 0, .1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu,
.nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li,
.nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a,
.nav-icons-big-screen .dropdown-menu li a {
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover,
.nav-icons-big-screen .dropdown-menu li a:hover {
color: #2250fc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-nav-responsive">
<li>HOME</li>
<li>LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
NOTE: The best way to do this is to use a unique class for your menu titles to avoid any inconsistency.
THANKS SO MUCH to both you guys!! the Jsfiddle gave me the right idea, here is the corrected function:
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
And I added the menu-item class to all my li items!
Thanks!!! problem SOLVED! That was pretty quick =)
This question already has answers here:
Make floating child visible outside an overflow:hidden parent
(6 answers)
Closed 4 years ago.
I have a the following dropdown html structure and css, it's parent has an overflow hidden -
The problem I am having is that when you select the dropdown, it is cut off by the overflow hidden, I need it to ignore the overflow.
I have looked at changing the dropdowns position to fixed, but then I would need to calculate its position for each dropdown, any other suggestions would help!
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
}
<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>
See working JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/
The structure is built using a plugin which sets the html and css. I am able to change the css but not the html structure. I also cant change the height of the parent, it needs to be scrollable if there are multiple dropdowns.
Use position:absolute and use margin or translate to adjust the position. Then don't add position:relative to the parent element so it get ignored by the overflow.
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
position:absolute;
margin-left:100px;
margin-top:-10px;
}
<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>
I'm working with this jSFiddle.
My solution works but I need something which closes submenu after mouseout() currently it opens submenu item or when mouseout() submenu2 because when I'm out of submenu2 or I'm at next item I don't want to see previous submenu2.
Simply something like this:
if ($.submenu li.item152 == mouseout() || $.submenu2'.eq(0) == mouseout()){
$('.submenu2').eq(0).slideUp(600);}
How can i do that?
Thank you.
Try this .Hide all with mouseleave
$('.submenu li.item152').hover(function() {
$('.submenu2').eq(0).slideDown(600);
$('.submenu2').eq(1).slideUp(600);
});
$('.submenu li.item153').hover(function() {
$('.submenu2').eq(1).slideDown(600);
$('.submenu2').eq(0).slideUp(600);
});
$('.submenu2').mouseleave(function(){
$('.submenu2').slideUp(600);
});
.submenu2{
display: none;
}
.submenu li{
display: inline-block;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="submenu">
<li class="item152">
Item 152
</li>
<li class="item153">
Item 153
</li>
</div>
<div class="submenu2">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</div>
<div class="submenu2">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</div>
First of all you need to fix Your HTML li must be under ul tag then use hover function for toggle submenu:
$(".menu li").hover(
function() {
$('.submenu.'+ $(this).attr('class')).slideDown(600);
},
function() {
$('.submenu.'+ $(this).attr('class')).slideUp(600);
}
);
.submenu {
display: none;
}
.menu li {
display: inline-block;
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="menu">
<li class="item152">
Item 152
</li>
<li class="item153">
Item 153
</li>
</ul>
<ul class="submenu item152">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</ul>
<ul class="submenu item153">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</ul>
Try this, pure css solution:
ul.submenu li{
position:relative
}
.submenu2{
position:absolute;
top:20px;
left:0;
display: none;
list-style-type: none;
padding:0px
}
ul.submenu li:hover ul.submenu2{
display: block;
}
ul.submenu2 li:hover{
display: block;
top:10px
}
.submenu ul li{
padding-right: 10px;
}
.submenu li{
display: inline-block;
padding-right: 10px;
}
<ul class="submenu">
<li class="item152">
Item 152
<ul class="submenu2">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</ul>
</li>
<li class="item153">
Item 153
<ul class="submenu2">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</ul>
</li>
</ul>
Hi I have a situation where I am using jquery slim scroll plugin with jquery sortable. The problem is when I drag the items from one list items to other the scroll bar on the right doesn't move along with , So if I have to drop the list to the last list items area I cannot go there unless I use mousewheel.
So how can i bind scrollbar position as I drag the item from one list area to other. Below is the code-
$(function() {
$("ul.droptrue").sortable({
revert: 'invalid',
connectWith: "ul"
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
$('.ScrollableAreanew ').slimScroll({
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false,
});
});
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 100%;
margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 100%;
border: 1px solid #000;
margin-bottom: 5px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="ScrollableAreanew">
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Can be dropped..</li>
<li class="ui-state-default">..on an empty list</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
Here what we need to do is
Get position of mouse - Y coordinate as we move inside the .ScrollableAreanew
Whenever a sortable item is moved (use sort event), move the slimScroll to the scrolled position using scrollTo.
sort event is triggered during sorting. See here for more details
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY; // Get position of mouse - Y coordinate
});
$("ul.droptrue").sortable({
sort : function(event, ui) { // This event is triggered during sorting.
var scrollTo_int = currentMousePos.y + 'px';
$(".ScrollableAreanew").slimScroll({
scrollTo : scrollTo_int, // scroll to mouse position
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false
});
},
revert: 'invalid',
connectWith: "ul"
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
$('.ScrollableAreanew ').slimScroll({
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false
});
});
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 100%;
margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 100%;
border: 1px solid #000;
margin-bottom: 5px;
}
.justAddingHeight
{
height:100px !important;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="justAddingHeight"></div>
<div class="ScrollableAreanew">
<ul id="sortable1" class="droptrue droppable">
<li class="ui-state-default draggable">Can be dropped..</li>
<li class="ui-state-default draggable">..on an empty list</li>
<li class="ui-state-default draggable">Item 3</li>
<li class="ui-state-default draggable">Item 4</li>
<li class="ui-state-default draggable">Item 5</li>
</ul>
<ul id="sortable2" class="droptrue droppable">
<li class="ui-state-highlight draggable">Cannot be dropped..</li>
<li class="ui-state-highlight draggable">..on an empty list</li>
<li class="ui-state-highlight draggable">Item 3</li>
<li class="ui-state-highlight draggable">Item 4</li>
<li class="ui-state-highlight draggable">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue droppable">
<li class="ui-state-highlight draggable">Cannot be dropped..</li>
<li class="ui-state-highlight draggable">..on an empty list</li>
<li class="ui-state-highlight draggable">Item 3</li>
<li class="ui-state-highlight draggable">Item 4</li>
<li class="ui-state-highlight draggable">Item 5</li>
</ul>
</div>
EDIT
Instead of getting mouse position inside the .ScrollableAreanew div, get the position of mouse in the document.
Note: Added div with class justAddingHeight (having height of 100px) as a POC.
Hope this solves your problem.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("ul.droptrue").sortable({
connectWith: "ul"
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Worker 1</li>
<li class="ui-state-default">Worker 2</li>
<li class="ui-state-default">Worker 3</li>
<li class="ui-state-default">Worker 4</li>
<li class="ui-state-default">Worker 5</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Worker 6</li>
<li class="ui-state-default">Worker 7</li>
<li class="ui-state-default">Worker 8</li>
<li class="ui-state-default">Worker 9</li>
<li class="ui-state-default">Worker 10</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Worker 11</li>
<li class="ui-state-default">Worker 12</li>
<li class="ui-state-default">Worker 13</li>
<li class="ui-state-default">Worker 14</li>
<li class="ui-state-default">Worker 15</li>
</ul>
<br style="clear:both">
</body>
</html>
As I mentioned above at the end of each Column the number of rows must be displayed and aside of each row numbering should be displayed.
1 worker1 1 worker8 1 worker14
2 worker2 2 worker10 2 worker13
3 worker3 3 worker11 3 worker15
4 worker4 4 worker12 total 3
5 worker5 total 4
6 worker7
7 worker6
8 worker9
Total 8
To do what you require you could wrap the ul elements in a div with another div under them to hold the total count of li elements within that container. You can then updated that total when an item is dropped using the stop property of the sortable plugin, like this:
$("ul.droptrue").sortable({
connectWith: "ul",
stop: function() {
$('.total').text(function() {
return 'Total: ' + $(this).closest('.container').find('li').length;
});
}
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
.container {
display: inline-block;
}
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 0.8em; /* changed so the example fits in the snippet better*/
width: 120px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Worker 1</li>
<li class="ui-state-default">Worker 2</li>
<li class="ui-state-default">Worker 3</li>
<li class="ui-state-default">Worker 4</li>
<li class="ui-state-default">Worker 5</li>
</ul>
<div class="total">Total: 5</div>
</div>
<div class="container">
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Worker 6</li>
<li class="ui-state-default">Worker 7</li>
<li class="ui-state-default">Worker 8</li>
<li class="ui-state-default">Worker 9</li>
<li class="ui-state-default">Worker 10</li>
</ul>
<div class="total">Total: 5</div>
</div>
<div class="container">
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Worker 11</li>
<li class="ui-state-default">Worker 12</li>
<li class="ui-state-default">Worker 13</li>
<li class="ui-state-default">Worker 14</li>
<li class="ui-state-default">Worker 15</li>
</ul>
<div class="total">Total: 5</div>
</div>