I make use of jQuery UI's Draggable functionality to make it so you can click and drag a table row. Unfortunately when I want to highlight the text to copy the data in one of the table cells, it starts dragging the row away. So I used the "distance" option like so:
$('.test').draggable({
revert: 'invalid',
helper: 'clone',
distance: 150,
start: function(event, ui) {
}
});
However my problem is that it still won't let me "highlight" the table row, even if it is prior to "dragging" it. :(
Oh btw, I'm just using a regular HTML table, IE:
<table>
<tr class="test"><td>Data</td></tr>
<tr class="test"><td>Data</td></tr>
</table>
Another Q&A on this topic has a solution and it explains the way to run disableSelection on all the elements within your items that are selectable to make it possible to select text for copy and paste and other uses. So for your problem, you could do:
$('td').disableSelection();
Related
having many events to manage, I opted for a select to dissect the events and drop them in the calendar, I made this <https://jsfiddle.net/max1974/mr5yxe7o/4/>
but I am faced with 2 problems .....
1 ° Initially the objects in the select drop into the calendar, but then if you select other items from the select the drop stops working.
2 ° while I drop the object from the mouse disappears and reappears only when I release it.
Could you help me please.
Please see my complete working jsfiddle:
https://jsfiddle.net/gq8eofyL/
You have to use helper() function to clone the element object inside select2 and avoid relative position hiding the element outside the select2 main <span>.
Like in this example:
helper: function(){
return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}});
In addition, use Select2 events: https://select2.org/programmatic-control/events
in order to re-initialize draggables when Select2 recreates the elements, everytime you select/remove the elements (see my comment1 above):
function initSelectDraggable(){
$("ul.select2-selection__rendered li").each(function(){
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
revert: true,
revertDuration: 0,
helper: function()
{
return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}
});
});
}
Thanks it works great, now the problem remains that when I drop the event I lose data-id, data-num that I would need to save them in the DB and the event remains blue in the calendar instead of the chosen color.
Thanks again to everyone jsfiddle.net/max1974/bmqdax0f/57/
I am trying to swap table rows using JQuery UI. It works well but I just could not get the row number during the drag and drop event. I need to know the row number for my following work, could someone help me?
eg.
$('#table1 tbody').sortable({
revert: true,
start: function(event, ui) {
// get row number, such as (row) 1
},
stop: function(event, ui) {
// get row number, such as (row) 3
}});
In fact, I do not need to sort table rows (just swap), if there are any possible solutions, please let me know...
Wrap the tr elements inside tbody
Add a helper clone when dragging a tr. Only way you can make the drag.
When the dragging starts, a clone is made (because of helper: "clone") and the c variable will hold reference to the clone and the tr being dragged. When the dragging stops, if it is outside a droppable, the clone is destroyed. If it is inside the draggable, we destroy the clone and the tr (so it is removed from the list and can't be dragged again)
Using stop event you can get row number of drag-gable rows.
stop: function(ui, event){
var id = event.item.index();
alert(id);
}
Try this
JsFiddle:
http://jsfiddle.net/Vn5SZ/31/
First of all no need to get the row number on start and stop since it will be same .
and to know the row number just give data attribute to your rows as:
data-rownumber=1
than try this
$('#table1 tbody').sortable({
revert: true,
stop: function(event, ui) {
var row=ui.draggable.attr('data-rownumber');
//this will be the dragged row id
}});
Simplest to see in a jsfiddle
Links to jsfiddle must be accompanied by code, therefore I am copying the js here:
$('.row').sortable({
placeholder: 'cell placeholder',
forcePlaceholderSize: true,
items: '.cell',
connectWith: '.row',
dropOnEmpty: true,
distance: 0.5,
tolerance: "pointer",
start: function() {
$('.row').css('min-height','30px');
},
stop: function(event, ui){
$('.row').css('min-height','');
}
});
the problem is, if I have two or more rows and one of them is being made visible after the cell is clicked on to being the drag, then the empty row cannot be dropped into unless the call is first hovered over another non-empty possible destination.
To see this in practice, click on the cell "iop" and try and drag it down into the thrid row. It doesn't work. BUT, if you click on the cell "iop", drag it up into the first row and then - without releasing it - back down into the third row, it does!
I presume that this has something to do with when sortable builds its internal list of possible targets. But, is there any way to make the empty row visible only once the dragging has started, and still have it targetable?
Refreshing sortable seems to do it:
$('.row').sortable('refresh');
https://jsfiddle.net/kfdmn9nm/
I have a table parsed to Mootools HtmlTable class. using:
var table = new HtmlTable($('htmlTableElement'), {
sortable: true,
parsers: ['string','number','numberLax','floatLax'],
selectable: true,
allowMultiSelect: true,
shiftForMultiSelect: false,
classRowSelected: 'selectedRow'
});
table.sort(1);
http://jsfiddle.net/LMQ75/
What I want to do is, to select different rows by clicking on them. It's working pretty fine for one row and also using the Shift -key you can also select more than one row in an order. But how is it possible not to deselect the selected rows when clicking on another row? So that I can select e.g. two rows that are not connected?
I also figured out, that a row can be selected by clicking on it, but not deselected. Can I change this behaviour that first click selects a row and second click deselects a row?
I'm surprised of myself, I found a simple and easy solution, just adding this lines of code below table initialization:
$('htmlTableElement').getElements('tbody tr').addEvent('click',function(e){
e.stopPropagation();
table.toggleRow(this);
});
http://jsfiddle.net/LMQ75/2/
As the question states, I'm trying to combine jQuery UI's Selectable and Draggable functions into a working drag-n-drop interface with the user being able to select multiple divs and move those divs into jQuery Droppables.
Here is the code I have to allow the user to select divs across a row in a table:
$('tr').selectable({
filter: 'div',
selected: function(event, ui) {
$(ui.selected).draggable({
containment: 'document',
axis: 'y',
snap: true,
snapMode: 'inner',
revert: 'invalid',
opacity: 0.8,
drag: function(e, ui) {
$('.ui-selected').css({
top : ui.position.top //Y-Axis Only
});
$('.ui-selected').addClass('ui-draggable-dragging');
},
stop: function() {
$('.ui-selected').removeClass('ui-selected ui-draggable');
}
});
}
});
As you can see, I've tried adding the known classes that jQuery UI adds to elements being dragged/selected/etc, but the only element that seems to act as an actual draggable is the one that the user has clicked on (is actually dragging).
My desire is to have the user drag the entire selected group, and have them all act as draggables (ie: revert on invalid, snap to droppable, etc)
Does anyone have any idea how to do this or where to go from here?
Also, here is a jsfiddle to demonstrate exactly what I mean (and where I'm currently at on this). You might have to resize the results view so the table cells are all the same width.
Simulate the behavior.
when selecting multiple item just mark them as selected manually (e.g. checkbox, add custom style, etc)
when dragging use draggable option helper to define custom clone helper : function(){
return "<p>custom item</p>"
},
this will hide individual items. And you can customize as you want.
Custom drop implementation which using those selected items to append into the proper place.