I'm developing a page with 3 tables. On the 3rd table i have the rows that could be sorted and dropped on the 1st or 2nd table.
Is there a way I can define dynamically if a specific row can or can't be dropped on one of the other 2 tables? A sort of dynamized "connectWith" option...or any other way...
You can define the rows of the third table using the .draggable() method of jQuery UI.
Calling the draggable method, you can specify where the elements can be dropped.
Then on drag of the tr, hide the current tr from the current table (the third one).
On drop of the tr, get the table where you dropped the tr and add really the tr, really removing the row from the third table.
It's better that at the beginning you don't remove immediately the row from the third table, because if the drag event is not fine (for example I drop in a wrong place) you can show again the row.
Here a link to jQuery UI draggable method:
https://jqueryui.com/draggable/
A POC of code:
$( "#third-table tr" ).draggable({
snap: ".drop-tables",
start: function() {
// hide the row from the third table
},
stop: function() {
// add the row to the target table
// remove the row from the third table
}
});
Related
My codepen has a jquery-ui sortable on a table. A few problems that I see are: 1) selecting a row to drag adjusts table width during selection, but resumes to the correct table width after it is dropped. 2) The selected table row shifts outside of left border of the table containment. 3) The selected table row loses the table styling. The data scrunches up apparently losing its default padding-right of 10px.
I am running Windows 7 and use chrome browser rev 56.0.2924.87
May someone can answer me the redundant need to post code before one can post?
Putting the bare minimum code here. See pen for full code.
<table class="playlist-table">
I was unable to find this question prior to posting my problems:
jquery UI Sortable with table and tr width
Thanks go to Yaroslav for this helper class that fixed issue#3. The selected table row now preserves styling after being selected.
.ui-sortable-helper {
display: table;
}
And to Keith, his code fixed issues 1) selecting a row to drag adjusts table width during selection. 2) The selected table row shifts outside of left border of the table containment.
$('td, th', '.playlist-table').each(function () {
var cell = $(this);
cell.width(cell.width());
});
Ref: Tablesorter
Issue: expand-child element remains visible when select page number clicked
Hi
The problem I'm facing is best described in steps
1.) I have nested tables inside a parent table
2.) I'm using the 'toggle' class on a tr followed by a tr with the class 'expand-child' (structural association) - jquery hides all nested tr's onload
3.) If the hidden tr (expand-child) is clicked open and the outer parent table's (holding the nested table) 'select page number' is clicked the 'expand-child' tr remains open while it's associated toggle tr has moved onto the previous page
I need to pass the associated expand-child tr to the previous page so it can be with it's associated toggle tr so that it too is not visible until the page it's on is in focus
Many thanks
I think the easiest solution would be to hide all child rows after the pager page changes. Try something like this (demo):
$('.tablesorter').on('pageMoved', function(){
$(this).find('.expand-child td').hide();
});
I have an ul of draggable items (#doc-editor-options ul li), an area for dropping those items (#doc-editor-content) and an ul within that area for holding those items (#items-holder), which is sortable. This dragging and dropping is only one-way, only items from the list can be dragged and dropped into the holder.
$("#doc-editor-options ul li").draggable({
helper: 'clone',
connectToSortable: '#item-holder',
containment: $(".doc-editor")
});
$("#doc-editor-content").droppable({
drop: function(e, ui){
console.log('dropped');
}
});
$("#item-holder").sortable({
placeholder: 'placeholder-highlight',
cursor: 'pointer',
});
Two questions that I have:
Right now when I drag an item from the list and drop it into the other list, the drop callback for .droppable() is called twice. I think this has something to do with the #item-holder being sortable. I want it to only be fired when I drop an item into the list and only know about that item's event and ui in the callback.
I also need the functionality where by default, the items-holder is not sortable. The only time it becomes sortable is when you are dragging and hovering an item over it. So I can't sort the list by default, but if I drag an item over to it, I can choose where to place that item in the list (i.e. the list is now sortable) and once I drop it, the list becomes unsortable again.
EDIT: I figured out #2, I needed to bind mousedown to the draggable items which enables sorting then disables it on mouseup. Still having problems with #1, it seems like some of the sortable events are firing the drop callback when I drop an item in or I hover out of the item holder.
1:
Your drop() gets called twice because connectToSortable is also triggering a drop().
My suggestion would be to delete $("#doc-editor-content").droppable() altogether, and instead add the receive(e, ui) handler to your sortable.
2:
Your fix works. However I would suggest a much easier alternative: leave the sortable always enabled and add the option "handle: h2". (Pick any tag that will not exist within your LIs.) This will let you drop into the list, but disable user sorting in-place.
Example:
$('#item-holder').sortable({
placeholder: 'placeholder-highlight',
cursor: 'pointer',
handle: 'h2',
receive: function(e, ui) {
console.log('dropped');
}
});
i'm adding rows to table dynamically, but the problem is i'm not able to select or activate when i click on the added rows, bellow is my code. same code is working for static rows.
$('.dataGrid tr').bind('click', function(){
$('.dataGrid tr').removeClass('active');
$(this).addClass('active');
});
$('').appendTo(table)
.append($('').text(pos.posId))
.append($('').text(pos.posName))
.append($('').text(pos.posAddress));
please help me..
You need the live() method there instead of click for dynamically generated elements.
$('.dataGrid tr').live('click', function(){
$('.dataGrid tr').removeClass('active');
$(this).addClass('active');
});
Adding new rows to a table does not automatically add the event listener you need.
Create a function that does two things:
1. Add/insert a row to the table.
2. Bind the same event listener to that row, that you are binding to the static rows.
I have a sortable list (of tasks). It helps prioritize tasks, so I want to keep this functionality. Now I want to add subtasks to the functionality: I want to enable users to drag one task over to another task and drop it there to turn it into a subtask.
Applying .draggable() and .droppable() to items that are already sortable has no effect. What could I do?
I put together a demo of how to do this... but it may not be the best method. Here are some problems I've discovered:
Because this code uses the placeholder to figure out where you are moving the list, you can only drop an item inside another item if you approach it from the top. I did get a working version where you could drop an item anywhere inside the base item, but the code was just too messy and cumbersome.
Sometimes when an item from the other list is dropped in an item, it becomes stuck. I'm not sure why, but it becomes unstuck when the list group is moved to the other list.
I'm sure there is a better method, one that calculates the intersection of list items (just like the sortable script does). But this is a quick and dirty method.
$(function() {
var phTop, container, indx;
$("#sortable1, #sortable2").sortable({
connectWith: '.connectedSortable',
beforeStop: function(e,ui){
phTop = ui.placeholder.position().top;
container = ui.placeholder.parent();
indx = ui.placeholder.index();
},
stop: function(e,ui){
var list = container.find('> li').eq(indx);
// 15 is a pixel tolerance between the two items (dragging in from the top)
if ( Math.abs( phTop - ui.position.top ) < 15 ) {
// prevent list depth > 1
if (ui.item.find('li').length > 0) { return; }
// add ul inside of li to make subgroup
if (!list.find('ul').length) { list.append('<ul></ul>'); }
ui.item.appendTo( list.find('> ul') );
}
container.find('li > ul:empty').remove(); // remove empty subgroups
}
}).disableSelection();
});
After I posted my question I had no patience, and I decided to ignore UI.sortable altogether, building the required functionality from draggable and droppable and using special divs as spacers that would swell up on dragover to facilitate dropping in between tasks.
That worked to some degree, except it's all much more code and it's a lot more jittery and bugprone than sortable, even with the refreshPositions option set to true. Still, there might be other valid reasons to want to circumvent UI.sortable.
In very brief faux code: $(.taskitem).draggable
revert: invalid
start: animate height of spacers from 0 to 5
$(.spacer).droppable
over: animate height from 5 to 50
out: animate height back to 5
drop: insert draggable after spacer
find spacer with same index as draggable and move it along