Is there a way for jQuery UI's sortable() to sort rows only by their "containing" element? I have a table with rowspanned cells that are only supposed to be sorted in their containing spanned columns.
var $sortable = $('.nested-sortable tbody');
$sortable.sortable({
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
});
jsfiddle
The column Make isn't sortable. The column Type should only be sortable within its "container", which is the Make column. This means that Types 1 and 2 cannot be dropped to Brand 2 and Type 3 cannot be dropped to Brand 1. The same is true for the Subtypes and models.
Is it possible for jQuery UI sortable out of the box? Thank you.
Apparently, I just needed to add another tbody selector to make it work:
$(function(){
var $sortable = $('.nested-sortable tbody tbody');
$sortable.sortable({
axis:'y',
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
});
});
jsfiddle
Related
I am using datatables.js https://www.datatables.net/ and am running in to a problem where I want the user to select one row for reach table shown.
I've tried several things but can't get it to work, my script checks all the datatables instead of the one you are selecting in. Which I understand because in my code I am fetching all the tables by using var table = $('table').DataTable();
But I have no idea how I could specify it so it checks if a selected class is set on one of the rows in the datatables.
var table = $('table').DataTable();
$('table tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
In the on() event get the row's table instead of using the table defined outside of the function.
Code
$('table tbody').on( 'click', 'tr', function () {
var table = $(this).closest("table");
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
I have a script that counts the number of rows in a table and assigns a value attribute to an input field. I am adding the draggable plugin Sortable to table rows, what would be the best way to run this script then on document ready, and on change. The first part works, but i am not getting alerted when the table rows change.
this is now my revised code:
function countRows(){
var i = 0;
$('#offices td input').each(function(){
$(this).attr("value", ++i);
});
}
$(document).ready(countRows);
// Sortable rows
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
})
$('.sorted_table').children("tbody").sortable({
stop: function (event, ui) {
countRows(); // re-number rows after sorting
}
});
Assuming you are using jQuery UI Sortable:
$('.sorted_table').children("tbody").sortable({
stop: function (event, ui) {
countRows(); // re-number rows after sorting
}
});
jsFiddle demo here: http://jsfiddle.net/7vmf1c4L/
I have ui-sortable table implemented with jquery-ui. The rows can be dragged to swap positions. All works fine, but when the row is dragged, all the remaining rows in a table get squeezed to 1/5 size (columns overlapping).
here's the code that invokes the sortable script on the table:
$(document).ready(function () {
var fixHelper = function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
};
$("tbody.sortable").sortable({
helper: fixHelper,
connectWith: "tbody.sortable",
containment: "parent",
dropOnEmpty: true,
cancel: "tr.sort-disabled",
receive: function (event, ui) {
ui.item.find("input[type='hidden']").val(this.id);
sortableDummyRowsUpdate();
}
});
});
When the dragged row is released to the new position, the table returns to normal. But while dragging everything looks awful
I have three sortable list boxes, one grey and two yellow. I can drag and clone child sortable li's into the bottom yellow lists no problem.
The problem is that once the child clone li's from the grey list box are placed into the yellow list boxes, you can no longer drag/shift them within the containing yellow list box or to the adjacent yellow list box. They just clone continuously when you attempt to drag them elsewhere.
I would like to drag and clone sortables from the grey list box into the yellow boxes and have the cloned child li's be able to drag and move within the yellow lists boxes without cloning.
How can I prevent the child li's from cloning. Any help would be much appreciated. Thanks.
http://jsfiddle.net/equiroga/96hJj/
$(function() {
$(".sortable").sortable(
{
helper : "clone",
connectWith : ".sortable",
start : function(event,ui)
{
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
position = $(ui.item).index();
},
beforeStop : function(event, ui)
{
if($(ui.item).closest('ul#sortable1').length>0)
$(this).sortable('cancel');
},
stop : function(event, ui)
{
if (position == 0) $("#sortable1").prepend(clone);
else before.after(clone);
}
});
$(".sortable").sortable();
});
You can set a particular behavior for the first list and a different for the others, the others can't interact with the first using a coonectWith selector with :not selector.
Code:
$(function () {
$("#sortable1").sortable({
helper: "clone",
connectWith: ".sortable",
start: function (event, ui) {
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
position = $(ui.item).index();
},
beforeStop: function (event, ui) {
if ($(ui.item).closest('ul#sortable1').length > 0) $(this).sortable('cancel');
},
stop: function (event, ui) {
if (position == 0) $("#sortable1").prepend(clone);
else before.after(clone);
}
});
$(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"});
});
Demo: http://jsfiddle.net/IrvinDominin/923VG/
I'm trying to select more than one item in a jQuery sortable set and then move the selected items around together.
Here's my weak beginning of an attempt to make it work. And here's the code:
HTML:
<div class="container">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
</div>
JS:
$('.container div').draggable({
connectToSortable: '.container',
//How do I drag all selected items?
helper: function(e, ui) {
return $('.selected');
}
});
$('.container').sortable({
axis: 'y',
//How do I sort all selected items?
helper: function(e, ui) {
return $('.selected');
}
});
$('.container div').live('click', function(e) {
$(this).toggleClass('selected');
});
CSS:
body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;}
I don't know if I'm headed in the right direction or not. I can't find an example of this anywhere online. Just lots of related questions. Does anyone know how?
For example, if I've selected items 4 and 5 out of a list of 6. I want to be able to drag 4 and 5 to the top of the set to get this order - 4 5 1 2 3 6 - Or if I selected 5 and 1 and drag them to the bottom - 2 3 4 6 1 5
This seems to work with the multisortable plugin. Code below. Or see jsFiddle.
// ctrl + click to select multiple
$('.container').multisortable({
stop: function(e, ui) {
var $group = $('.ui-multisort-grouped').not(ui.item);
$group.clone().insertAfter($(ui.item));
$group.each(function() {
$(this).removeClass('ui-multisort-grouped');
});
$group.remove();
}
});
But what if multisortable breaks with future jQuery versions?
Modifying my answer here (according to your HTML and CSS) :
Select items to sort
Create a custom helper
Hide the selected items until sort is done
Resize the helper and placeholder according to the selection
Manually detach selected items from the current position and attach them to the new position after sort
Show the hidden items (undo step 3) after step5
$(function () {
$('.container').on('click', 'div', function () {
$(this).toggleClass('selected');
});
$(".container").sortable({
revert: true,
helper: function (e, item) {
if (!item.hasClass('selected')) item.addClass('selected');
var elements = $('.selected').not('.ui-sortable-placeholder').clone();
var helper = $('<div/>');
item.siblings('.selected').addClass('hidden');
return helper.append(elements);
},
start: function (e, ui) {
var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
ui.item.data('items', elements);
var len = ui.helper.children().length;
var currentHeight = ui.helper.height()
var itemHeight = ui.item.height() + 32; // 32 = 16x2 padding
ui.helper.height(currentHeight + (len * itemHeight))
ui.placeholder.height((len * itemHeight))
},
receive: function (e, ui) {
ui.item.before(ui.item.data('items'));
},
stop: function (e, ui) {
ui.item.siblings('.selected').removeClass('hidden');
$('.selected').removeClass('selected');
}
});
});
Updated Fiddle