I am trying to swap two TD elements in table on Drag&Drop. I found this plugin Swappable and it works in some way. But when I drag some element the cursor change position to some specific value. I do not want changing cursor position. But when I rework this plugin it stops work.
Does anyone have experience with it or know about any other plugin?
Thanks,
Zbynek
Usually I use the jQuery sortable. It does pretty much want you want. You can use it in a table too.
Then I do my stuff (including ajax updates) in a function setted in the receive event
Did you try the JQuery Sortable() option?
See http://jqueryui.com/sortable/#display-grid
Related
I'm having an odd problem with jQuery draggable this morning, I wonder if anyone else has come across this.
I have many small divs inside a large div. They are absolutely positioned: "position:absolute" in CSS for their class, with the actual position itself calculated and set in JS on demand.
Now I'm adding functionality to allow these divs to be draggable.
But, as soon as I make one draggable, it is given "position:relative" directly on the element, which as you might imagine, seriously messes up the on screen position.
Does anyone know why it changes the "position" like this or how to tell it not to?
EDIT:
Just realised there is a rather obvious answer staring me in the face - !important on my position:absolute! This seems to fix it. BUT I'm still interested if anyone knows why it sets "position: relative" like this (and doesn't either make it configurable or check first if it needs position)...I'm wondering what problems I've just stored up for myself ;-)
"I came across the same problem today. The reason was I was applying draggable() on a dynamically created element. I was 'later' appending it to dom. The element should be in dom when you apply draggable() (if style is being applied by a class). In short, when it finds no position attached with the element , it adds relative." - Jashwant
Firs do: .append(jElement) Then: jElement.draggable()
For some reason Jashwant put his answer in the comment to the question. So I thought it will be convenient to other to repost it here.
It also happened to me, but only on Chrome. Reason?
It was like this:
$("#div-popup").draggable({ handle: ".top", containment: 'document'});
Then I removed the containment parameter, like this:
$("#div-popup").draggable({ handle: ".top"});
So it's about the Browser (Chrome in this case), which sets position to Relative when you specify which containment the element will be draggable.
in my case it seems to be a race condition between the stylesheets and javascript loading...
i realized i'd made the mistake of including the stylesheets AFTER the javascript in the document head. they should be included BEFORE the javascript because $(document).ready() does not account for the CSS being loaded by the browser: https://stackoverflow.com/a/1324720/3633109
I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
For now, it's only draggable within viewpoint.
You can't do this, it's part of the page/frame it's in. If this were allowed, you'd see advertisements outside the frame as well :)
If you want to drag it outside of the scrolled view in the page, that's the default behavior, you can test it here.
Nick Craver, I think you did not understand me. If you set up a simple div element to be draggable, you could drag it beyond the viewpoint. But that just doesn't work you use the dialog. What ads are you talking about?
I have a textbox that I am attaching jQuery UI's Autocomplete functionality to and I am using CSS to give it a max height via the example here. My problem is that doing this causes the z-index problem that bgiframe solves to come back again, but in a different way. The initial autocomplete menu is above all the controls underneath it, but when I begin to scroll the autocomplete menu falls behind them.
Any suggestions?
EDIT:
This is purely an IE6 bug.
As you can see, after scrolling down the autocomplete falls behind the other controls.
I could solve the problem by replacing offsetHeight by scrollHeight in the following line (from jquery.bgiframe.js) :
height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
This change solved the bug for the autocomplete fields with vertical scrollbars. I could not spot any regression in other kinds of dialogs (but I did not run extensive tests).
You need to reverse the z-index order of the form elements (or their containers) using javascript. I.e., "Social Worker" has the lowest, "DX Code" the highest z-index.
You could change the offsetHeight to scrollHeight, like Siggen says, but I have encountered problems when there is only 1 result returned from the autocomplete. The 1 result is squished into a window that only like 2 pxs high.
I found a fix though.
When you have a data.length<2, you should use the offsetHeight, rather than the scrollHeight.
You have to modify autocomplete.js.
Locate this code:
if($.fn.bgiframe)list.bgiframe();
And make it this:
if($.fn.bgiframe){
if(data.length<2)
list.bgiframe({height:'expression(this.parentNode.offsetHeight+\'px\')'});
else
list.bgiframe();
}
Remember, this code should be used in combination with Siggen's fix.
I have used a combination of both parameter for the height like this:
'height:'+(s.height=='auto'?'expression(Math.max(this.parentNode.offsetHeight,this.parentNode.scrollHeight)+\'px\')':prop(s.height))+';'
Look at the max function. Now it is good with no scroll bar (shorter list and longer list as well)
and now the autocomplete component looks perfect in IE6.
You can see the code on http://designvictim.com/jqueryui/index.html
I'm trying to make something similar to the widget drag and drop from
Wordpress.
I've gotten pretty close to what we wanted to accomplish but we wanted
to be able to when you drag a item out of the "Drop Area's" and drop
it outside then it would erase itself and send of course an Ajax call
with the updated contents. That is why i made the #body droppable.
Also if you start a drag from the Module Column to one of the drop
areas i wanted it to be sortable directly before dropping it and i was
able to accomplish this with "connectToSortable: '.moduleContainer' "
but now every time i start with an item from the module container and
start dragging and hover one of the drop areas and continue to another
one, the drop function of the $('#body').droppable() fires which
boggles my mind!
I hope its some clumsy coding of mine and not a bug of jqueryUI.
Thanks in advance for any help and i hope i made myself clear on the
problem.
Figure it out!
I made my .moduleContainer droppable and sortable and you shouldn't do that. Automatically when you make a group sortable it becomes droppable. I couldn't find this information anywhere in the jQuery UI documentation though.