I have an igGrid from Infragistics using IgniteUI version 16.2.
I'm trying to make the rows draggable using the "draggable" library from jQuery UI version 1.11.4 (combined with jQuery version 1.11.3).
My "droppable" target is a div outside of the igGrid.
I'm able to drag and drop the rows just fine as long as I stay within the grid. However, as soon as I try to drag the row outside of the grid, the grid starts to scroll.
Here is my jQuery that turns the rows into "draggable" elements:
$("#grid > tbody > tr").draggable({
helper: "clone",
revert: "invalid",
cursorAt: { bottom: 0, left: 0 },
start: function (evt, ui) {
// get the id of the row being dragged
var row_id = ui.helper.prevObject.data("id");
// get a reference to the <tr> being dragged
var original_row_element = $("#grid > tbody > tr[data-id='" + row_id + "']");
// get the collection of all <tr>'s that come after the selected row
var all_rows_after_the_original = original_row_element.nextAll("tr");
// move all those rows to a temporary holding <div> outside of the grid
$("#temp_row_holder").append(all_rows_after_the_original);
},
stop: function (evt, ui) {
// get all those rows that we moved out of the grid earlier
var all_rows_after_the_original = $("#temp_row_holder").children("tr");
// move the <tr>'s back into the grid
$("#grid > tbody").append(all_rows_after_the_original);
}
});
And here is the scrollable portion of my grid once it has been rendered by the Infragistics library:
<div id="grid_scroll" class="ui-iggrid-scrolldiv ui-widget-content igscroll-touchscrollable" data-scroll="true" data-onedirection="true" data-xscroller="#grid_hscroller" style="overflow-x: hidden; overflow-y: auto; height: 311px;">
<table id="grid" role="grid" aria-describedby="grid_scroll" cellpadding="0" cellspacing="0" border="0" class="ui-iggrid-table ui-widget-content" style="table-layout: fixed;">
<colgroup></colgroup>
<tbody role="rowgroup" class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">
<tr data-id="c3bf5936-8786-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr>
<tr class="ui-ig-altrecord ui-iggrid-altrecord open-hand-pointer ui-draggable ui-draggable-handle" data-id="a2a54d20-5a83-e711-8135-caf5c8230062" role="row" tabindex="0"></tr>
<tr data-id="ca784490-cb82-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr>
<tr class="ui-ig-altrecord ui-iggrid-altrecord open-hand-pointer ui-draggable ui-draggable-handle" data-id="4d95ba39-cd81-e711-8135-caf5c8230062" role="row" tabindex="0"></tr>
<tr data-id="7b02f501-cb81-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr>
</tbody>
</table>
</div>
As you can see, my current solution is to remove all sibling <tr>'s from the grid so it won't scroll when I drag my row. This solution is working just fine, but it's obviously not acceptable from the end-user perspective because all of their rows suddenly disappear when they start dragging.
It seems like there would be some CSS or javascript that could modify the grid on the "start" event to prevent it from scrolling. I have also tried fiddling with the overflow-y property because to my CSS-ignorant brain, that seems like the obvious answer, but nothing has helped.
EDIT : Here is a JS Fiddle as requested
You can use scroll option. It is true by default and causes auto-scrolls while dragging. You need scroll: false for prevent auto-scrolls like this:
$("#GRIDRFDList > tbody > tr").draggable({
helper: "clone",
revert: "invalid",
cursorAt: { bottom: 0, left: 0 },
scroll: false // Add this line
});
Online output (fiddle)
Related
I would like to have the jQueryUI tooltip work on disabled Buttons and Inputs as well. How can I make this happen?
Included is a sample showing various inputs and buttons, both enabled and disabled and how the jQueryUI tooltip seems to skip evaluation of the disabled elements.
Please click on the field/button labels to open the tooltips. My users don't like hover based tooltips on INPUTs and hover does not work on mobile.
If you hover over the disabled INPUT and BUTTON the browser tooltip will appear but not the jQueryUI version. This is obvious because the browser version does not evaluate the HTML but shows it raw.
Note: This question is NOT a duplicate of Show tooltip for disabled items, because that question does not ask about actual disabled tags (buttons or inputs)
// Disable HOVER tooltips for input elements since they are just annoying.
$("input[title]").tooltip({
disabled: true,
content: function() {
// Allows the tooltip text to be treated as raw HTML.
return $(this).prop('title');
},
close: function(event, ui) {
// Disable the Tooltip once closed to ensure it can only open via click.
$(this).tooltip('disable');
}
});
// Basic tooltips for the Buttons only but format HTML.
$("button[title]").tooltip({
content: function() {
// Allows the tooltip text to be treated as raw HTML.
return $(this).prop('title');
}
});
/* Manually Open the Tooltips */
$(".ui-field-help").click(function(e) {
var forId = e.target.getAttribute('for');
if (forId) {
var $forEl = $("#" + forId);
if ($forEl.length)
$forEl.tooltip('enable').tooltip('open');
}
});
// The following is only to load the CSS....
function loadCSS(filename) {
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", filename);
document.head.appendChild(file);
}
loadCSS("https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css");
.ui-field-help {
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<table width=100%>
<tr>
<td><label for="A000" class="ui-field-help">Enabled Input</label></td>
<td><input type="Text" id="A000" title="title #A000<hr>Fancy <i>HTML</i>..."></td>
</tr>
<tr>
<td><label for="B000" class="ui-field-help">Disabled Input</label></td>
<td><input disabled=disabled type="Text" id="B000" title="title #B000<hr>Fancy <i>HTML</i>..."></td>
</tr>
<tr>
<td><label for="E000" class="ui-field-help">Enabled Button</label></td>
<td><button id="E000" title="title #E000<hr>Fancy <i>HTML</i>...">Enabled Button</button></td>
</tr>
<tr>
<td><label for="D000" class="ui-field-help">Disabled Button</label></td>
<td><button disabled=disabled type="Text" id="D000" title="title #D000<hr>Fancy <i>HTML</i>...">Disabled Button</button></td>
</tr>
</table>
After not finding the answer I resolved the problem by looping through all disabled items with a [title] and processing them individually to move the tooltip to the label for that input element.
$("[title]:disabled", $container).each(function (ix, el) {
// Since the jQueryUI tooltips don't work on disabled controls we remove them
// and then attempt to add them to the elements label.
var title = el.title;
el.title = ''; // Clear the title to avoid the browser tooltip
// Look for a Label attached to the element and add the tooltip there.
$('label[for=' + el.id + ']').attr('title', title).tooltip({
content: function () {
// Allows the tooltip text to be treated as raw HTML.
return $(this).prop('title');
}
});
});
I have a table and need to drag/drop cells containing data into blank cells. I'm able to drag and drop fine, but once a cell is dragged away, I need its "old" position to now become a droppable cell. Since the cell is dragged, I need something else to reference. I ended up wrapping each of the td elements in a div element, but all references return "undefined" on the inner cellDiv id (or return the outer tableDiv id). On the fiddle, I notice that the blue background is not appearing so I don't think the 'cellDiv' is doing much.
Next I am going to try swapping the td and cellDiv elements, but I decided to post the question first, as I've searched everywhere and cannot seem to find this specific problem addressed. Thanks for your help.
here is the problem in a jsfiddle: http://jsfiddle.net/tgsz34hx/3/
And the code:
<div id='tableDiv'>
<table>
<tr id='row1'>
<div class='cellDiv' id='r1c1'>
<td class='drop' id='col1'>Drop Here</td></div>
<div class='cellDiv' id='r1c2'>
<td class='nodrop' id='col2'>Drag Me</td></div>
</tr>
</table>
</div>
$(document).ready(function () {
var fromDiv;
$('.nodrop').draggable({
cursor: "move",
appendTo: "body",
revert: "invalid",
start: function (event, ui) {
var thisDiv = $(this).attr('id');
fromDiv = $(this).closest('.cellDiv').attr('id');
alert("thisDiv=" + thisDiv + ", fromDiv=" + fromDiv);
}
});
$('.drop').droppable({
accept: ".nodrop",
tolerance: "pointer",
snap: ".drop",
drop: function (event, ui) {
var parenttd = $(ui.draggable).closest('td').attr('id');
var parentdiv = $(ui.draggable).closest('.cellDiv').attr('id');
// alert("parenttd=" + parenttd + ", parentdiv=" + parentdiv);
$(this).removeClass('drop');
$(this).addClass('nodrop');
$(this).droppable('option', 'disabled', true);
}
});
});
#tableDiv {
background-color: grey;
}
#tableDiv td {
background-color: red;
}
#tableDiv div {
background-color: blue;
}
I am new to jQuery/jQuery UI. I am trying to create multiple tabs in a page(sample.html) which loads dynamic content(temp.html) via ajax. Desired effect is content in temp.html should change according to tab selected. I am using position to place some widgets in positions relative to each other.
The problem I am facing is when i click the first tab, everything is working fine. When i click on the second tab positioning does not work. I have added my code below.
Sample.html
$(function() {
$("#tabs").tabs({
ajaxOptions : {
error : function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab.");
},
cache : false
}
});
});
<div id="content" class="content">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
</div>
temp.html
#widget1 {
width: 150px;
height: 70px;
top: 20px;
left: 50px
}
#widget2 {
width: 150px;
height: 70px;
}
function resetPositions() {
$("#widget2").position({
my : "left top",
at : "right bottom",
of : "#widget1",
offset : "0 50"
});
}
$(function() {
$(".customAccordion").draggable();
$(".customAccordion").accordion({
collapsible : true,
fillSpace : false,
icons : {
header : "ui-icon-circle-arrow-e",
headerSelected : "ui-icon-circle-arrow-s"
}
});
resetPositions();
});
<div id="widget1" class="customAccordion">
<h3>Widget 1</h3>
<div>Widget 1</div>
</div>
<div id="widget2" class="customAccordion">
<h3>Widget 2</h3>
<div>Widget 2</div>
</div>
Please do let me know if i am making any mistakes.
Possibly a tricky part of jQuery UI, you need to make sure you initialize your accordion(s) BEFORE your tabs
$(".customAccordion").accordion();
$("#tabs").tabs();
Try first to remove your accordion, see if it helps.
Then try to initialize your tabs at the very end.
Then you need to verify loading your html page with AJAX will run its included Javascript... If not, you need to paste that initialization code into the select event of your tabs.
$("#tabs").tabs(
{
select: function(event,ui)
{
// initAccordions();
}
});
I have a table with left and right col. Inside the cols, some small tables (as elements) from PHP loop.
I would like to make possible to drag and drop the elements from left to right cols AND also change the sort inside the col itself. Very hard for me !
Here's my code :
HTML part (left col but the right one is the same)
<style>
.deplace{
cursor:move;
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td id="leftMenu" valign="top" style="width:180px;height:800px;border:1px solid black">
<?php
while($rowg = mysql_fetch_assoc($sqlg)){
echo '<table width="100%" cellpadding="5" cellspacing="2"
style="background-color:#CCC;border: 1px solid black;height:100px"
class="deplace" id="left_'.$rowg['id'].'" modulename="'.modif_nom($rowg['module']).'" sourceid="'.$rowg['id'].'">
echo '<tr><td" align="center" style="width:100%">'.$rowg['module'].'</td></tr>';
echo '</table>';
}
?>
</td></tr></table>
And the JS code :
<script language="javascript" type="text/javascript">
$(document).ready(function() { //
$('#leftMenu').Sortable({
//revert: true,
accept: 'deplace',
axis : 'vertically',
onchange: function(event, ui) {
serial = $.SortSerialize('leftMenu');
$.ajax ( {
url : "xhr.php?source=leftMenu",
type : "get",
data : serial.hash,
success: function(data){alert(data);}
});
}
});
$('#rightMenu').Sortable({
//revert: true,
accept: 'deplace',
axis : 'vertically',
onchange: function(event, ui) {
serial = $.SortSerialize('rightMenu');
$.ajax ( {
url : "xhr.php?source=rightMenu",
type : "get",
data : serial.hash,
success: function(data){alert(data);}
});
}
});
//only the functions to move the tables from left to right
$('#rightMenu').draggable({
revert:false,
helper:'original',
});
$('#leftMenu').droppable({
over:function(event, ui){
alert('dropped');
}
});
});
</script>
So, like that, it seems there's a conflict between the functions. If I only let the sortable functions, it's OK but I can't do anything in the receiver col and I would like to send a request to PHP to update a mysql table.
Thanks a lot for your help !
There are a few issues with your code:
Sortable is lower-case
SortSerialize does not exist, I think you mean sortable("serialize")
$('#rightMenu').draggable should be changed to $('#rightMenu').children().draggable because you want to drag the elements inside the menu
Have a look at the jQuery UI Sortable doc too.
I have a list like so:
<ol id="page_items">
<li>
<label for="page_body_1">Content Area 1</label>
<textarea name="page_body_1" class="page_content_area" rows="10"></textarea>
</li>
<li>
<label for="page_body_2">Content Area 2</label>
<textarea name="page_body_2" class="page_content_area" rows="10"></textarea>
</li>
</ol>
When the page loads, #page_items turns into a tinyMCE editor. What I want is for the element that defines whether or not the li elements are being sorted to be the <label> but no other child elements of li. So the only element that starts the sort is the label.
Here's my jQuery:
$(document).ready(function(){
$("#page_items").sortable({
activate: function(event, ui) {
var EditorID = ui.item.find('textarea').attr('id');
if ( EditorID ){
tinyMCE.execCommand("mceRemoveControl", false, EditorID);
$('#'+EditorID).hide();
}
},
stop: function(event, ui) {
var EditorID = ui.item.find('textarea').attr('id');
if ( EditorID ){
$('#'+EditorID).show();
tinyMCE.execCommand("mceAddControl", false, EditorID);
delete EditorID;
}
}
});
});
In case anyone is wondering, I'm disabling the tinyMCE because in FireFox, moving an iFrame around the DOM clears it's contents and doesn't allow focus back on it.
Is there a way to cancel the sortable if the element clicked isn't the label?
If anyone has any code clean-up suggestions they are also welcome!
Thanks.
This turned out to be a sortable option that I didn't see before (I looked... oh I looked). The handle option is what I need. This initializes a sortable with the handle option specified.
Simply...
$(document).ready(function(){
$("#page_items").sortable({
handle: 'label'
});
});