Detach and Randomize items from separate lists - javascript

For each .container, I want to detach() the <li> from their own<ul>and append them to each container's .destination <ul>. The problem is that all <li> are being detached from both lists and appended together on both lists.
I want to be able to create a list of all <li> that are within each .container.
So during test, all of the items with the .colored class will detach and append to the .destination--b <ul>.
$.fn.randomize = function(selector) {
(selector ? this.find(selector) : this).parent().each(function() {
$(this)
.children(selector)
.sort(function() {
return Math.random() - 0.5;
})
.detach()
.appendTo(".destination");
});
return this;
};
$("button").click(function() {
$(".container").each(function() {
$(".item").randomize();
});
});
.container {
border: 2px solid
}
.destination {
border: 2px solid
}
ul {
border: 1px solid blue
}
li {
border: 1px solid green
}
.colored {
background: silver
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container--a">
<ul class="destination destination--a">
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
<div class="container container--b">
<ul class="destination destination--b">
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
</div>
<button>Click</button>


The class .destination is ambiguous, it's appearing in both lists, you need to specify which one exactly. You can do that by searching for a .destination from the parent element. Although I noticed that this code will merge <ul> lists into one, not sure if that's the desired behavior, you never mentioned?
$.fn.randomize = function(selector) {
(selector ? this.find(selector) : this).parent().each(function() {
$(this)
.children(selector)
.sort(function() {
return Math.random() - 0.5;
})
.detach()
.appendTo($(this).parent().find(".destination"));
});
return this;
};
$("button").click(function() {
$(".container").each(function() {
$(".item").randomize();
});
});
.container {
border: 2px solid
}
.destination {
border: 2px solid
}
ul {
border: 1px solid blue
}
li {
border: 1px solid green
}
.colored {
background: silver
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container--a">
<ul class="destination destination--a">
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
<div class="container container--b">
<ul class="destination destination--b">
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
</div>
<button>Click</button>

Related

How remove class step by step [duplicate]

This question already has answers here:
How to select first N elements with jquery?
(7 answers)
Closed 1 year ago.
I have list items:
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item hidden"> 4</li>
<li class="item hidden"> 5</li>
<li class="item hidden"> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
<div id="btn">click btn</div>
$(function () {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item').removeClass('hidden');
});
});
This jQuery code remove all class "hidden", but how to remove a class first from the first three, then the next three and etc... ?
It should look like this:
click btn
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item "> 4</li>
<li class="item "> 5</li>
<li class="item "> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
and click btn
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item "> 4</li>
<li class="item "> 5</li>
<li class="item "> 6</li>
<li class="item "> 7</li>
<li class="item "> 8</li>
<li class="item "> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
and etc...
https://jsfiddle.net/ep8dk9o5/

Each time the button is clicked, just slice up the items which has hidden class as done below:
$(function() {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item.hidden').slice(0, 3).removeClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item hidden"> 4</li>
<li class="item hidden"> 5</li>
<li class="item hidden"> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
<div id="btn">click btn</div>

How can I move the links on one inline?

I have tried this CSS, but when you click on the fist link the other two will move at the bottom, same for the other links.
I have tried to change the initial code and put the links in one class, but I don't know that much JavaScript, so probably my modifications are very wrong.
How can I move the links on one line ? So that when you click on one link the toggled list appears without affecting the link position, so all the links will still be on one line.
HTML
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Javascript
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
CSS
.dropdown{
display:inline-block;
}
Initial code
http://jsfiddle.net/6t6BP/4/
Modified by me code
https://jsfiddle.net/Lavi2/yyfhrss0/

One solution would be to make the dropdown-container to not push elements down. You can do that, in your case, with position:absolute and position it relative to the link that triggers it.
P.S. that is not just javascript, it's jQuery.
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
position:relative
}
.dropdown-container {
position:absolute;
left:0;
top:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

Full code example
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
vertical-align:top;
}
.dropdown-container ul{
list-style:none;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

How to add ID to all li in list using javascript

<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>
I want to add ID for all li tags, use pure javascript. I am new, looking forward to helping everyone
http://jsfiddle.net/8XN8j/32/

Get all elements using Document#querySelectorAll method and then convert NodeList into array for iterating using Array#forEach method.
// get all elements
var element = document.querySelectorAll('.list li');
// convert NodeList into an array
// for older browser use [].slice.call(element)
Array.from(element)
// iterate over the element
.forEach(function(ele, i) {
// generate and set id
ele.setAttribute("id", 'item' + (i + 1));
})
#red {
color: red;
}
#item1 {
color: red;
}
#item2 {
color: blue;
}
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>

You should pass in a callback function to the forEach function. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach for more info.
This is how you do it with ES6.
var element = document.querySelectorAll('.list li');
element.forEach((e, i) => {
e.setAttribute("id", 'item'+(i+1));
});
#red {
color: red;
}
#item1 {
color: red;
}
#item2 {
color: blue;
}
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>
http://jsfiddle.net/hidingmode/Ltkoe8y0/1/

Simply use as below.
const list = document.querySelectorAll(".list li");
for (var i = 0; i < list.length; i++) {
const li = list[i];
li.id = `item-${i}`;
}
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>

How to make automatic shift of elements at hit on them of the menu

Initially, everything looks like this. The categories are on the left. I use bootstrap for dishes and generally on the site.
You can suggest how to do this: when opening a category, you need to do a shift of dishes to col-md-offset-3.
For example, if there are more categories / subcategories, then you need to do the offset further for the dishes that are on the left. The problem is that I do not know how to do it at all. Do instead of me do not need to, at least tell.
And now I have his work.
The code is better to look if to expand result on all screen
var blockRect = document.querySelector('.block').getBoundingClientRect();
var foods = document.querySelectorAll('.food');
function toggleSubCategories(_category, init) {
if (!init) {
document.querySelectorAll('.subcategory').forEach(function(category) {
if (category !== _category) {
category.classList.remove('show');
}
});
_category.classList.toggle('show');
}
}
function isOpenListStructure() {
return document.querySelectorAll('.subcategory.show').length === 0 ? false : true;
}
function foodOffset(category, init) {
var subcategories = document.querySelector('.list-structure > ul');
var offsetListToFood = subcategories.offsetHeight - blockRect.height;
toggleSubCategories(category.children[1], init);
var isOpen = isOpenListStructure();
if (subcategories.offsetHeight >= blockRect.height) {
foods.forEach(function(food, index) {
var nextFoodIndex = index;
var foodRectData = food.getBoundingClientRect();
// detect left foods
if (foodRectData.left <= blockRect.left) {
var absoluteFoodHeight = foodRectData.height + foodRectData.top;
var absoluteListHeight = subcategories.offsetHeight + Math.abs(subcategories.getBoundingClientRect().top);
console.log(food, 'subcategories.offsetHeight ', subcategories.offsetHeight, ' > ', foodRectData.top, ' && ', subcategories.offsetHeight, ' < ', absoluteFoodHeight);
if ( absoluteListHeight >= foodRectData.top && absoluteListHeight <= absoluteFoodHeight ) {
food.classList.add('col-md-offset-4');
} else {
food.classList.remove('col-md-offset-4');
}
}
});
} else {
document.querySelectorAll('.food').forEach(function (food) {
if (food.classList.contains('col-md-offset-4')) {
food.classList.remove('col-md-offset-4');
}
});
}
}
document.querySelectorAll('.category').forEach(function(category) {
foodOffset(category, true);
category.addEventListener('click', function(e) {
e.preventDefault();
foodOffset(this, false);
});
});
.list-structure {
position: relative;
}
.list-structure li {
margin-bottom: 4px;
}
.list-structure li a {
color: #fff;
font-size: 12px;
padding: 11px 10px 7px 31px;
display: block;
}
.list-structure li {
display: block;
background: #546a88;
margin-bottom: 2px;
text-transform: uppercase;
}
.list-structure > ul {
position: absolute;
width: 100% height: 100%;
}
.categories {
padding: 10px;
}
.subcategory {
display: none;
}
.block {
border: 1px solid blue;
padding: 10px;
height: 200px;
}
.food {
padding: 10px;
}
.show {
display: block;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 categories">
<div class="list-structure">
<ul>
<li class="category">
Маки/Суши
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
<li class="category">
Салаты/Супы
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
<li class="category">
Салаты/Супы
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
<li class="category">
Салаты/Супы
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
<li class="category">
Горячие блюда
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
<li class="category">
Десерты
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
<li class="category">
Напитки
<ul class=" subcategory">
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
<li>Подкатегория 1</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-9 block">
asdsakjdslkajdklsad
</div>
</div>
<div class="row">
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
</div>
The problem is that when the category "Напитки" is expanded, the first block is shifted, this is correct, but the next one is left in place, and 3 is shifted.
I know that this is due to a shift, but I do not know how to fix it.

How to perform Drag and Drop using Jquery?

I want to do drag and drop. I got the idea from this Jquery Link.
My code also working fine, if I apply the same code without changing anything. Now I want to change the ID name of UI tag. Once I changed, the drag and drop is not working.
Here is my code
Aspx code
$(function() {
$("#ColumnNamesSortable, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
#ColumnNamesSortable,
#sortable2 {
border: 1px solid #846868;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#ColumnNamesSortable li,
#sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px!important;
font-size: 0.9em;
width: 155px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<ul id="ColumnNamesSortable" class="connectedSortable"> //change id name from sortable1 to ColumnNamesSortable (not working)
<li class="ui-state-default">StoreID</li>
<li class="ui-state-default">ItemLookupCode</li>
<li class="ui-state-default">ExtendedDescription</li>
<li class="ui-state-default">SubDescription1</li>
<li class="ui-state-default">Department</li>
<li class="ui-state-default">Category</li>
<li class="ui-state-default">SupplierCode</li>
<li class="ui-state-default">SupplierName</li>
<li class="ui-state-default">TotalQuantity</li>
<li class="ui-state-default">ExtendedPrice</li>
<li class="ui-state-default">ExtendedCost</li>
<li class="ui-state-default">Profit</li>
<li class="ui-state-default">UnitOfMeasure</li>
<li class="ui-state-default">CustomerAccountNumber</li>
<li class="ui-state-default">CustomerName</li>
</ul>
<br />
<ul id="sortable2" class="connectedSortable"> // this one is working
<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>
I want to create four drag and drop. For example
ColumnNamesSortable
DataField
ColumnField
RowField
Why when I change the name of Id of particular tag it's not working. And it doesn't show any error on console.

Here is a working example. Any sortable li can be dragged and dropped into another.
Just add all the id's to the selector and instantiate sortable.
$("#ColumnNamesSortable, #sortable2, #ColumnField, #RowField").sortable({
Working Example:
$(function() {
$("#ColumnNamesSortable, #sortable2, #ColumnField, #RowField").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
li {
list-style: none;
padding: 2px 5px;
margin-bottom: 8px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<ul id="ColumnNamesSortable" class="connectedSortable">
<li class="ui-state-default">StoreID</li>
<li class="ui-state-default">ItemLookupCode</li>
<li class="ui-state-default">ExtendedDescription</li>
<li class="ui-state-default">SubDescription1</li>
<li class="ui-state-default">Department</li>
<li class="ui-state-default">Category</li>
<li class="ui-state-default">SupplierCode</li>
<li class="ui-state-default">SupplierName</li>
<li class="ui-state-default">TotalQuantity</li>
<li class="ui-state-default">ExtendedPrice</li>
<li class="ui-state-default">ExtendedCost</li>
<li class="ui-state-default">Profit</li>
<li class="ui-state-default">UnitOfMeasure</li>
<li class="ui-state-default">CustomerAccountNumber</li>
<li class="ui-state-default">CustomerName</li>
</ul>
<br />
<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>
<br />
<ul id="ColumnField" class="connectedSortable">
<li class="ui-state-highlight">ColumnField 1</li>
<li class="ui-state-highlight">ColumnField 2</li>
<li class="ui-state-highlight">ColumnField 3</li>
<li class="ui-state-highlight">ColumnField 4</li>
<li class="ui-state-highlight">ColumnField 5</li>
</ul>
<br />
<ul id="RowField" class="connectedSortable">
<li class="ui-state-highlight">RowField 1</li>
<li class="ui-state-highlight">RowField 2</li>
<li class="ui-state-highlight">RowField 3</li>
<li class="ui-state-highlight">RowField 4</li>
<li class="ui-state-highlight">RowField 5</li>
</ul>

Categories

Resources