<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable - Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortable-10, #sortable-11 { list-style-type: none; margin: 0; padding: 0; width: 80%; } #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .highlight { border: 1px solid #000000; font-weight: bold; font-size: 45px; background-color: #cedc98; } .default { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } .wrap { display: table-row-group; } .wrap1 { float:left; width: 100px; } </style> <script> $(function() { $( "#sortable-10" ).sortable({ start: function (event, ui) { $("span#result").html ($("span#result").html () + "<b>start</b><br>"); }, receive : function (event, ui) { $("span#result").html ($("span#result").html () + ", receive"); }, stop: function (event, ui) { $("span#result").html ($("span#result").html () + "<b>stop</b><br>"); } }); $( "#sortable-11" ).sortable({ connectWith : "#sortable-10, #sortable-11" }); }); </script> </head> <body> <div class = "wrap"> <div class = "wrap1"> <h3>List 1</h3> <ul id = "sortable-10"> <li class = "default">A</li> <li class = "default">B</li> <li class = "default">C</li> <li class = "default">D</li> </ul> </div> <div class = "wrap1"> <h3>List 2</h3> <ul id = "sortable-11"> <li class = "default">a</li> <li class = "default">b</li> <li class = "default">c</li> <li class = "default">d</li> </ul> </div> </div> <hr /> <span id = result></span> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable - Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortable-8{ list-style-type: none; margin: 0; padding: 0; width: 25%; float:left;} #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .default { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $('#sortable-8').sortable({ update: function(event, ui) { var productOrder = $(this).sortable('toArray').toString(); $("#sortable-9").text (productOrder); } }); }); </script> </head> <body> <ul id = "sortable-8"> <li id = "1" class = "default">Product 1</li> <li id = "2" class = "default">Product 2</li> <li id = "3" class = "default">Product 3</li> <li id = "4" class = "default">Product 4</li> </ul> <br> <h3><span id = "sortable-9"></span></h3> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable - Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortable-5, #sortable-6,#sortable-7 { list-style-type: none; margin: 0; padding: 0; width: 20%;float:left } #sortable-5 li, #sortable-6 li,#sortable-7 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .default { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#sortable-5, #sortable-6" ).sortable({ connectWith: "#sortable-5, #sortable-6" }); $( "#sortable-7").sortable({ connectWith: "#sortable-5", dropOnEmpty: false }); }); </script> </head> <body> <ul id = "sortable-5"><h3>List 1</h3> <li class = "default">A</li> <li class = "default">B</li> <li class = "default">C</li> <li class = "default">D</li> </ul> <ul id = "sortable-6"><h3>List 2</h3> <li class = "default">a</li> <li class = "default">b</li> <li class = "default">c</li> <li class = "default">d</li> </ul> <ul id = "sortable-7"><h3>List 3</h3> <li class = "default">e</li> <li class = "default">f</li> <li class = "default">g</li> <li class = "default">h</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable - Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortable-4 { list-style-type: none; margin: 0; padding: 0; width: 25%; } #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .highlight { border: 1px solid red; font-weight: bold; font-size: 45px; background-color: #333333; } .default { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#sortable-4" ).sortable({ placeholder: "highlight" }); }); </script> </head> <body> <ul id = "sortable-4"> <li class = "default">Product 1</li> <li class = "default">Product 2</li> <li class = "default">Product 3</li> <li class = "default">Product 4</li> <li class = "default">Product 5</li> <li class = "default">Product 6</li> <li class = "default">Product 7</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable - Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortable-2, #sortable-3 { list-style-type: none; margin: 0; padding: 0; width: 25%; } #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .default { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#sortable-2" ).sortable({ delay:500 }); $( "#sortable-3" ).sortable({ distance:30 }); }); </script> </head> <body> <h3>Delay by 500ms</h3> <ul id = "sortable-2"> <li class = "default">Product 1</li> <li class = "default">Product 2</li> <li class = "default">Product 3</li> <li class = "default">Product 4</li> </ul> <h3>Distance Delay by 30px</h3> <ul id = "sortable-3"> <li class = "default">Product 1</li> <li class = "default">Product 2</li> <li class = "default">Product 3</li> <li class = "default">Product 4</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable - Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortable-1 { list-style-type: none; margin: 0; padding: 0; width: 25%; } #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .default { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#sortable-1" ).sortable(); }); </script> </head> <body> <ul id = "sortable-1"> <li class = "default">Product 1</li> <li class = "default">Product 2</li> <li class = "default">Product 3</li> <li class = "default">Product 4</li> <li class = "default">Product 5</li> <li class = "default">Product 6</li> <li class = "default">Product 7</li> </ul> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI selectable-7</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #selectable-7 .ui-selecting { background: #707070 ; } #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; } #selectable-7 { list-style-type: none; margin: 0; padding: 0; width: 20%; } #selectable-7 li { margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } .resultarea { background: #cedc98; border-top: 1px solid #000000; border-bottom: 1px solid #000000; color: #333333; font-size:14px; } </style> <script> $(function() { $( "#selectable-7" ).selectable({ selected: function() { var result = $( "#result" ).empty(); $( ".ui-selected", this ).each(function() { var index = $( "#selectable-7 li" ).index( this ); result.append( " #" + ( index + 1 ) ); }); } }); }); </script> </head> <body> <h3>Events</h3> <ol id = "selectable-7"> <li class = "ui-widget-content">Product 1</li> <li class = "ui-widget-content">Product 2</li> <li class = "ui-widget-content">Product 3</li> <li class = "ui-widget-content">Product 4</li> <li class = "ui-widget-content">Product 5</li> <li class = "ui-widget-content">Product 6</li> <li class = "ui-widget-content">Product 7</li> </ol> <span class = "resultarea">Selected Product</span>> <span id = result class = "resultarea"></span> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Selectable</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { background: #707070 ; } #selectable-5 .ui-selected,#selectable-6 .ui-selected { background: #EEEEEE; color: #000000; } #selectable-5,#selectable-6 { list-style-type: none; margin: 0; padding: 0; width: 20%; } #selectable-5 li,#selectable-6 li { margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#selectable-5" ).selectable(); $( "#selectable-5" ).selectable('disable'); $( "#selectable-6" ).selectable(); $( "#selectable-6" ).selectable( "option", "distance", 1 ); }); </script> </head> <body> <h3>Disabled using disable() method</h3> <ol id = "selectable-5"> <li class = "ui-widget-content">Product 1</li> <li class = "ui-widget-content">Product 2</li> <li class = "ui-widget-content">Product 3</li> </ol> <h3>Select using method option( optionName, value )</h3> <ol id = "selectable-6"> <li class = "ui-widget-content">Product 4</li> <li class = "ui-widget-content">Product 5</li> <li class = "ui-widget-content">Product 6</li> <li class = "ui-widget-content">Product 7</li> </ol> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI selectable-4</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #selectable-4 .ui-selecting { background: #707070 ; } #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; } #selectable-4 { list-style-type: none; margin: 0; padding: 0; width: 20%; } #selectable-4 li { margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#selectable-4" ).selectable({ filter : "li:first-child" }); }); </script> </head> <body> <ol id = "selectable-4"> <li class = "ui-widget-content">Product 1</li> <li class = "ui-widget-content">Product 2</li> <li class = "ui-widget-content">Product 3</li> <li class = "ui-widget-content">Product 4</li> <li class = "ui-widget-content">Product 5</li> <li class = "ui-widget-content">Product 6</li> <li class = "ui-widget-content">Product 7</li> </ol> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Selectable</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { background: #707070 ; } #selectable-2 .ui-selected,#selectable-3 .ui-selected { background: #EEEEEE; color: #000000; } #selectable-2,#selectable-3 { list-style-type: none; margin: 0; padding: 0; width: 20%; } #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#selectable-2" ).selectable({ delay : 1000 }); $( "#selectable-3" ).selectable({ distance : 100 }); }); </script> </head> <body> <h3>Starts after delay of 1000ms</h3> <ol id = "selectable-2"> <li class = "ui-widget-content">Product 1</li> <li class = "ui-widget-content">Product 2</li> <li class = "ui-widget-content">Product 3</li> </ol> <h3>Starts after mouse moves distance of 100px</h3> <ol id = "selectable-3"> <li class = "ui-widget-content">Product 4</li> <li class = "ui-widget-content">Product 5</li> <li class = "ui-widget-content">Product 6</li> <li class = "ui-widget-content">Product 7</li> </ol> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more