I'm implementing a connected list like a Kanban board. Everything works but the placeholder is still missing. I'm looking now for a way to add a the own element as placeholder like how they done it in Gitlab:
How can I do this? I know that there is a placeholder variable but I'm not sure how I can use the same element as placeholder. This is my code:
jQuery( document ).ready( function ( $ ) {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</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="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</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>
</body>
</html>
Does something like this help you?
jQuery(document).ready(function($) {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
start: function(event, ui) {
var clone = $(ui.item[0].outerHTML).clone();
},
placeholder: {
element: function(clone, ui) {
return $('<li class="fade">' + clone[0].innerHTML + '</li>');
},
update: function() {
return;
}
},
}).disableSelection();
});
#sortable1,
#sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li,
#sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.fade {
opacity: 0.5;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</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="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</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>
</body>
</html>
Related
I am using the JQuery UI sortable plugin, using the "connect with" functionality to allow LI elements to be moved between two different parent lists.
I am trying to produce an alert showing the ID of the original list from which the LI element was contained when a list item is moved from either #sortable1 to #sortable2 or visa versa.
The Jquery I am trying to use this as follows:
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
alert(ui.originalPosition.id);
}
}).disableSelection();
});
Currently this produced a undefined output, rather than #sortable1 to #sortable2.
I have included below a sample script recreating the issue I am having.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
alert(ui.originalPosition.id);
}
}).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</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="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</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>
</body>
</html>
The ui object (Sortable) has a sender jQuery object that has as the originating element.
Set your alert to this: ui.sender[0].id and you'll have it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
alert(ui.sender[0].id);
}
}).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</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="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</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>
</body>
</html>
I've already submitted an issue here but just wanted to check if you can solve this faster here.
Trying to exclude an item from being draggable works but not from being sortable -- the problem is that other elements can be placed behind it.
SortableJS Docs don't seem to have exclude.
Here's the expected behavior using jQuery UI:
//jQuery UI
$("#demo .sortable").sortable({
items: "li:not(.exclude)",
cancel: "li.exclude"
});
$("#demo .sortable").disableSelection();
$('.add-new').click(function(){
$(this).prev().clone().insertBefore(this);
});
h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<h1>jQuery UI</h1>
<div id="demo">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
</ul>
</div><!-- End demo -->
Notice that you can never place an item after the last "Add New Item".
This is another example using jQuery UI that makes distinction between sortable and drop target and can disable it either one.
What I've tried so far with SortableJS:
// SortableJS
let mySortable = $("#demo2 .sortable").sortable({
draggable: "li:not(.exclude)",
animation: 250,
forceFallback: true,
removeCloneOnHide: true,
touchStartThreshold: 10,
onMove: function(evt) {
//doesn't work
//console.log ($(evt.dragged).index(),$('.exclude').index());
//return $(evt.dragged).is(':last-child') ? false : true;
},
onEnd: function(evt) {
var itemEl = evt.item; // dragged HTMLElement
if (!$('.exclude').is(':last-child')) {
// Somewhat works but is super hacky and visually bad.
//$('.exclude').appendTo($('.exclude').parent());
}
}
});
$('.add-new').click(function(){
$(this).prev().clone().insertBefore(this);
});
h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs#latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs#latest/jquery-sortable.js"></script>
<h1>SortableJS</h1>
<div id="demo2">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li draggable="false" droppable="false" class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
</ul>
</div>
<!-- End demo -->
I don't want to take the "Add New Item" out of the sortable div or position:absolute it
Any idea how to accomplish this?
Thanks!
If you check documentation there is one option filter: ".ignore-elements" you can use this to ignore elements which you do not want to be draggable . Then , check if the related target element doesn't have exclude class depending on this return true or false to cancel event.
Demo Code :
let mySortable = $("#demo2 .sortable").sortable({
animation: 250,
forceFallback: true,
removeCloneOnHide: true,
touchStartThreshold: 10,
filter: ".exclude", //use this
onMove: function(evt) {
return evt.related.className.indexOf('exclude') === -1; //and this
}
});
$('.add-new').click(function() {
$(this).prev().clone().insertBefore(this);
});
h1 {
font-size: 1em;
margin: 1em
}
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 260px;
overflow: auto;
}
.sortable li {
background: lightgray;
text-align: center;
float: left;
width: 50px;
height: 50px;
margin: 0.2em;
padding: 0.2em;
cursor: move;
}
.sortable li.add-new {
cursor: default;
color: #959595;
opacity: 0.8;
background: white;
outline: 2px dotted gray
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs#latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs#latest/jquery-sortable.js"></script>
<h1>SortableJS</h1>
<div id="demo2">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li draggable="false" droppable="false" class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
</ul>
</div>
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>
I'm looking specifically at the "Selectable" demos. Here is the example code for reference:
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>
None of the HTML contains an id of "feedback" and I've tried commenting the #feedback styling in and out, but I can't see a difference.
Thanks
I think is copy-paste of the example css code of the jQuery UI selectable. It is needed only for the third example Serialize look at the <p id="feedback">.
Demo code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
</body>
</html>
It's only used in the third demo...
In the serialize demo, if you check devtools, you'll see:
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>