Am following :
http://jqueryui.com/sortable/#connect-lists
Implemented everything as it is. Still drag and drop not working at all. Trying for 2 days. Here is the code inside head:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<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>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
And 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>
Please help me out.
I figured out. Thanks for suggesting firebug.
I was omitting http: in my link:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
But this what I copied from tutorial link I mentioned above. Dont why they presented it as such.
Use this, You forgot using http:
Code
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Use Firebug addon in Firefox to to see Console Errors. It will help you resolve the errors.
See if it helps.
Related
I'm using the following JS code which I obtained from jQuery UI: moving items from one list to another:
$("#list-one, #list-two").sortable({
connectWith: '.connectedSortable',
start: function () {
sender = $(this);
recvok = false;
},
over: function () {
recvok = ($(this).not(sender).length != 0);
},
stop: function () {
if (!recvok)
$(this).sortable('cancel');
}
}).disableSelection();
This code allows drag and drop from the first to the second list and vice-versa. I only want drag and drop to work in one direction, from the first to the second list. Is this possible? Any help would be greatly appreciated. Thanks.
You just change the attribute connectWith: here i refuse to drag from list2 to list1..
$("#list-one, #list-two").sortable({
connectWith: '#list-two',
start: function () {
sender = $(this);
recvok = false;
},
over: function () {
recvok = ($(this).not(sender).length != 0);
},
stop: function () {
if (!recvok)
$(this).sortable('cancel');
}
}).disableSelection();
<!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.12.1/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-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul id="list-one" 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="list-two" 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>
another solution is to prevent the mousedown event on second list, but you cant reorder the list
$('#list-two li').mousedown(function(event){
event.preventDefault();
event.stopPropagation();
});
$("#list-one, #list-two").sortable({
connectWith: '.connectedSortable',
start: function () {
sender = $(this);
recvok = false;
},
over: function () {
recvok = ($(this).not(sender).length != 0);
},
stop: function () {
if (!recvok)
$(this).sortable('cancel');
}
}).disableSelection();
<!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.12.1/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-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul id="list-one" 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="list-two" 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 have these tabs but is it possible to make the other inactive tabs to be unclickable?
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
</ul>
</div>
</div>
To get the best result you can:
Add the disabled class to the li element
Remove the data-toggle attribute for the a
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active">Step 0</li>
<li>Step 1</li>
<li class="disabled"><a href="#step2" >Step 2</a></li>
<li class="disabled"><a href="#step3" >Step 3</a></li>
<li class="disabled"><a href="#step4" >Step 4</a></li>
</ul>
</div>
</div>
You can use :not() CSS selector with pointer-events: none; to disable click event.
li:not(.active) a{
pointer-events: none;
}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
</ul>
</div>
</div>
Simply add this class to the tabs that you want to disable the clicks.
Here is the css.
.avoid-clicks {
pointer-events: none;
}
disable them all and enable the active one
$('li').prop('disabled',true);
$('.active').prop('disabled',false);
To disable the links on the fly using jquery try this:
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Go to google
You can add the following rules to your non-active items to make them unclickable. This was suggested in the following post:
How to disable all div content
.disabled, li:not(.active) {
pointer-events: none;
opacity: 0.4;
}
ul {
display: inline-flex;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
height: 1em;
line-height: 1em;
}
li {
width: 14%;
height: 2em;
margin: 0.1%;
line-height: 2em;
background-color: #FFF;
border: thin solid #777;
text-align: center;
}
li a {
display: block;
width: 100%:
height: 100%;
text-decoration: none;
}
li a, li a:active, li:visited {
color: #48A;
}
li a:hover {
color: #5AC;
text-decoration: underline;
}
.active {
background-color: #FFF;
font-weight: bold;
border: thin solid #DDD;
}
.disabled, li:not(.active) {
background-color: #AAA;
pointer-events: none;
opacity: 0.4;
}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
</ul>
</div>
</div>
My problem is that I can not sort elements in my unordered list.
The placeholder is always shown in the first row, where the first element is. (when I drag element). Oder elements are not moving at all and are not giving space to element currently dragging (which should be default functionality of sortable).
Here my code pen example
(to add elements to the list just click 'Add' several times. To enable sortable functionality, click button 'Sort'. To disable sortable functionality click 'Not sortable')
For sortable I have properties below:
$("#btnSortable").click(function() {
$("#ulNotes").sortable({
handle: '.divText',
tolerance: 'pointer',
placeholder: 'sortablePlaceholder',
forcePlaceholderSize: true,
forceHelperSize: true,
cursorAt: {left: 0, top: 0}
});
});
If you remove class="list-unstyled" and hold an element above another element it works !! I think that the problem is your css.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; float:left; border:1px solid black;width:30%;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<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>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</body>
I created sortable list of items using jQuery sortable library.
HTML :
<ul id="sortable">
<li id="item1" data-index="1">Item 1</li>
<li id="item2" data-index="2">Item 2</li>
<li id="item3" data-index="3">Item 3</li>
<li id="item4" data-index="4">Item 4</li>
<li id="item5" data-index="5">Item 5</li>
</ul>
JS :
(function($) {
$('#sortable').sortable({
stop: function(e, ui) {
console.log(ui.item.index()); // Returns 0,1,2 etc
}
});
})(jQuery);
How can I use data-index attribute of li tag as a custom index?
It should print custom index value instead of its own index value i.e 0,1,2 etc.
Working fiddle
You could use $(ui.item).data('index') check example below :
(function($) {
$('#sortable').sortable({
stop: function(e, ui) {
console.log($(ui.item).data('index')); // Returns 0,1,2 etc
}
});
})(jQuery);
Hope this helps.
(function($) {
$('#sortable').sortable({
stop: function(e, ui) {
alert($(ui.item).data('index')); // Returns 0,1,2 etc
}
});
})(jQuery);
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<ul id="sortable">
<li id="item1" data-index="111">Item 1</li>
<li id="item2" data-index="222">Item 2</li>
<li id="item3" data-index="333">Item 3</li>
<li id="item4" data-index="444">Item 4</li>
<li id="item5" data-index="555">Item 5</li>
</ul>
I am using jQuery UI Connectedlist
Here drag and drop is working fine with both side from left to right and right to left.
How can I disable right to left ? It has to work only one way, from left to right.
I need also sorting to still work inside ul yellow items like in grey items.
$(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;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
You could cancel the drag event in the right list sortable2 using receive event in sortable1 to prevent receiving any item from second list.
To drag grey lis back to the left side we will add helper class e.g s2 that will identify the sortable2 original items and cancel the drag only on them :
$("#sortable1").sortable({
receive: function(ev, ui) {
if(ui.item.hasClass("s2"))
ui.sender.sortable("cancel");
}
});
Hope this helps.
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
$("#sortable1").sortable({
receive: function(ev, ui) {
if(ui.item.hasClass("s2"))
ui.sender.sortable("cancel");
}
});
});
#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;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<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 s2">Item 1</li>
<li class="ui-state-highlight s2">Item 2</li>
<li class="ui-state-highlight s2">Item 3</li>
<li class="ui-state-highlight s2">Item 4</li>
<li class="ui-state-highlight s2">Item 5</li>
</ul>
</body>
</html>
Currently your connectWith selector matches both the sortable, i.e it's a two way connection. If you only want one way connection from left to right, just connect the left sortable to right sortable using a more specific selector (#sortable2) than a common one:
$(function() {
$("#sortable1").sortable({
connectWith: "#sortable2"
}).disableSelection();
$("#sortable2").sortable({}).disableSelection();
});
The demo below has the shorter code that does the same thing:
$(function() {
$(".connectedSortable").sortable({
connectWith: "#sortable2"
//----------^---------- #sortable2 connectWith #sortable2 has no effect
}).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;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<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>
The options you are looking for are cancel and update (s2 inspired by the post above), it will disable the drag on matched elements.
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
cancel: ".ui-state-highlight, .s2",
update: function( event, ui ) {ui.item.addClass("s2");}
}).disableSelection();
});