To be able to set the required max length attributes and also to be able to portable I have it working in a crude way Except for the property inspector and was wanting advice or code samples.
In the below example I am using just li's which I am sure is not the way to go, as
-
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery UI Draggable + Sortable</title>
- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
- <link rel="stylesheet" href="/resources/demos/style.css">
- <style>
- ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
- li { margin: 5px; padding: 5px; width: 150px; }
- </style>
- <script>
- $(function() {
- $( "#sortable" ).sortable({
- revert: true
- });
- $( "#draggable" ).draggable({
- connectToSortable: "#sortable",
- helper: "clone",
- revert: "invalid"
- });
- $( "ul, li" ).disableSelection();
-
- $( "#draggable2" ).draggable({
- connectToSortable: "#sortable",
- helper: "clone",
- revert: "invalid"
- });
- $( "ul, li" ).disableSelection();
- });
- </script>
- </head>
- <body>
-
- <div style="float:left;">
- <ul>
- <li id="draggable" class="ui-state-highlight"><input type="text" id="test">Text Box</li>
- </ul>
- <ul>
- <li id="draggable2" class="ui-state-highlight">Radio Button</li>
- </ul>
- </div>
- <div style="float:left;">
- <ul id="sortable">
- <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>
- </div>
-
-
- </body>
- </html>