Table drag and drop (holding only one column) - javascript

I wanted to do draggable table rows, I found TableDnD jQuery plugin and it works fine
$(function() {
$("table").tableDnD();
});
As you can see there:
http://jsfiddle.net/drBfS/1/.
But I wanted to make only one column draggable. I mean, whole row (tr) is moved like now, but you can move row only by dragging left column (td.drag), when trying to drag right column it should be no effect. Have you got any idea how it can be done?

It appears that this is an older plugin, where it might have been possible to do this at one point, according to this document: http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
However, after looking through the source now, it is no longer possible. Instead, perhaps consider simply using jQuery UI sortable. If you wrap your rows in a tbody, this code will get you what you want:
jQuery(function () {
jQuery('table tbody').sortable({ handle:'.drag' });
});

Unfortunately, it's not possible with the TableDnD plugin. That plugin was designed to enable row dragging, not column dragging.
From the documentation:
This TableDnD plugin allows the user to reorder rows within a table

Related

handsontable / javascript - Disable new rows being added by dragging

I have a handsontable table which is dynamic, meaning data can be added after initiation. The problem is, however, that new rows can be added to the table when dragging down while clicking the corner of a cell. How would I prevent users from expanding the table while making sure I can still add new rows if one would interact with a button for example.
I tried using
afterCreateRow: function(index, amount){
data.splice(index, amount)
},
but that prevents me from adding new rows using the alter function.
If this question was rather vague: See the link below for a default jsfiddle with handsontable. Click the corner of a cell and drag down, you'll see.
http://jsfiddle.net/warpech/hU6Kz/
TL;DR: Disable row creation when dragging cells, allow row creation using (in code) handsontable.alter('insert_row');
Thanks in advance.
You can add this code to prevent row creation when you are dragging cells :
fillHandle: {
autoInsertRow: false,
},
EDIT: Check out this fiddle.
So I added this
fillHandle: {
autoInsertRow: false
}
and removed minSpareRows: 1.
This gives you the drag functionality without the automatic creation of rows.
To test:
If you right-click and manually insert a row (Insert row below), and then click and drag some value into the new row using the fill handle, it should paste the value in without creating a new row underneath.
Note: If you need the same functionality horizontally (aka, being able to drag values horizontally without auto-creating new columns) remove minSparecols: 1
Hope this is what you're looking for!
Add the fillHandle: false option to your current options.
This removes the ability to drag and create new rows, but still leaves you with the ability to add new rows via the context menu (contextMenu: true) and the minimum spare rows option (minSpareRows: 1).
I understand your problem, I was in same situation.
I have solved with this:
maxRows: getFixedNumberOfRows(),
minRows: getFixedNumberOfRows(),
With this solution you can keep drag and drop for easy fill cells, and avoid add rows at the end
If anyone knows a better solution is welcome

JQuery-UI : How to define sortable td tags of a Table?

I am using JQuery-UI's Sortable to sort my table's td tags of each row as
$(".scheduler").children('tbody')
.children('tr').sortable({
revert: true
});
but I found additional column has appeared. Here is JsFiddle Link. Can anyone give me suggestion ?
Additional question : Can I sort td tags of the whole table instead of each row ? (currently I can sort only td tags of same rows. I would like to drag one td and replace with another td tag of different rows)
Regarding the additional column, it is rendered, because when you start dragging an item, jQuery UI sortable adds a placeholder element to the row.
You could workaround this behavior by using
helper: "clone"
The placeholder will still be added, but the original element to be dragged will get display: none and the helper will be positioned absolutely.
Maybe, instead of using table, you could use a list… https://jqueryui.com/sortable/#display-grid
Regarding sorting the whole table, there is no simple way I can imagine using jQuery UI sortable. The best behavior I achieved so far is initializing using
$(".scheduler").sortable({
items: "td"
});
but it will just move table cells from one row to the other causing more and more columns to be added to the table.
make you jquery code like this
$(".scheduler tr").sortable({
revert: true
});
i tried this on jsfiddle and working for td sorting

Highlighting rows with DataTables (or other table/grid plug-ins)

There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!
Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});

Updating a table from Javascript

I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.
You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.
Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.

Drag Table Rows in jQuery

Using jQuery (and UI), I want to be able to drag table rows out of the table and drop them on some element. The rows themselves should not leave the table, similar to how iTunes works when dragging multiple selected songs. I need to use a table since this is tabular data and I already have a table sort plugin in place.
Any idea how to achieve this?
JQuery UI's droppable() lets you define a function to run whenever an acceptable draggable() is dropped onto that droppable(). The demo on this page was what helped me understand how to code it. Look at their code by clicking "View Source." Especially this part:
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
You should be able to create a drop function to clone the row you want, for example, but not delete it from its original location.
Just try this plugin, written in plain Javascript, able to drag and sort rows and columns.
https://sindu12jun.github.io/table-dragger/

Categories

Resources