Jump box when drag in another point how fix jump.
These are my codes here:
$('.box_reminded_pop,.boxing').draggable({
connectToSortable: ".line",
containment: '.day_table ',
});
When I remove this section all work fine but the html content of the dragged box not goes here:
$(".line").sortable({
revert: true,
});
Related
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
Using jQuery UI, I am trying to create an interface with two scrollable containers, each containing many draggable elements. The user can drag an element from one container to the other.
The dropping feature is not an issue. When dropped, the element is detached and recreated in the right place under its new parent.
My problem is that the draggable element cannot be displayed outside its container when the container has position:relative; applied, so while dragging, the element will disappear when it is moved outside the container boundaries.
This default behaviour makes sense, as normally the user would want to drag an element inside its container. As a workaround I had assumed the solution would be to use the draggable property 'appendTo', which I thought would move the element outside its container, but unfortunately this hasn't seemed to have had any effect.
DOM: (each view is scrollable and each container has position:relative and is as large as it needs to be to hold all elements)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
Javascript:
$('div.card').draggable({
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
Please see JSFiddle for a simplified explanation of the problem. I didn't want to bloat the example with droppable code, so this just illustrates the dragging issue. http://jsfiddle.net/Em7Ak/
Many thanks in advance.
I'm not sure if this will fix your exact problem, but I came across this question looking for the same answer and this is what I found.
In the options for .draggable(), pass in helper:'clone' to make a clone of the item automatically so that it can be dragged out of the container. And use appendTo:'body' to put it at the end of the <body> tag. So in my case, my options look somewhat like this, adding in revert:'invalid' to cause it to spring back if it isn't dropped somewhere valid:
jQuery(".myselector").draggable({
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
});
use the "clone" helper and hide the item while dragging it and show it again on stop.
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});
I had similar problem some months ago.
My need was to be able to use the auto scrolling of one big container from others
Here is my question for more details, JqueryUI, drag elements into cells of a scrolling dropable div containing large table
I found a workaround. The idea is to append the element clone to the scrollable container during the helper construction callback, then append the helper to the body using a setTimeout function after 1ms. The helper position must be mapped on the mouse position to avoid offset problem.
Here is my solution (JSFiddle seems to be down now, try it later if no code is displaying in the windows) : http://jsfiddle.net/QvRjL/134/
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
appendTo: 'body',
containment: 'body',
scroll: true,
helper: function(){
//Hack to append the cartridge to the body (visible above others divs),
//but still belonging to the scrollable container
$('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');
$("#clone").hide();
setTimeout(function(){
$('#clone').appendTo('body');
$("#clone").show();
},1);
return $("#clone");
}
});
});
Add position:absolute to card style:
div.card {
position:absolute;
width:100px; height:50px;
border:1px black solid;
background-color:orange;
text-align:center; vertical-align:middle;
}
On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.
I have attempted to do this like so:
Mouseover function:
$(function() {
$( ".ui-widget-content" ).mouseover(function(){
$(this).css("width", "200px");
$(this).css("height", "200px");
}).mouseout(function(){
$(this).css("width", "100px");
$(this).css("height", "40px");
})
})
Draggable function:
$(function() {
$( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
drag: function( event, ui ) {
$(this).css("width", "100px");
$(this).css("height", "40px");
}
});
});
Droppable function:
$(function() {
$( "td.chart:not(:first-child)" ).droppable({
accept: ".ui-widget-content",
drop: function( event, ui ) {
$("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
}
});
});
Div that is getting dragged and dropped:
Lorem Ipsum
I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?
It would maybe help to take a look at your html.
It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item.
I would advise trying to change the tolerance of your droppable element to see if it helps :
$( ".selector" ).droppable({ tolerance: "pointer" });
jQuery Documentation states :
Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:
fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount
This is my accordion: http://muso-syndicate.com/accordion/index9.htm - N.B. only currently styled for SF, FF, doesn't currently work in IE
If you select a 2nd category header once another one has been opened, it doesn't re-focus on the new header. By example, click on 'Classical' then scroll down and select 'Jazz', it doesn't automatically scroll back up to the top of the 2nd category.
Ideally, I'd like to add a 'scrollTo' function to '.bind' to the jQuery UI library. However, I have tried various solutions suggested on StackOverflow but none seem to work for me!
As the categories will vary in height as more content is added, I'd prefer not to use a solution that uses a fixed pixel scrollTo solution as this will require constant altering as new content is added to each category.
Any suggestions would be greatly appreciated as several folk seem to be scratching their heads on this one!
UPDATE:
I've got much closer to a solution for this but still requires some tweaking to stop the focus occasionally scrolling past the category header. Please see code below:
$(function() {
$( "#categories" ).accordion({
collapsible: true,
autoHeight: false,
active: -1,
change: function(event, ui)
{
$("#categories").bind("accordionchange", function(event, ui)
{
$("#categories").animate({scrollTop: $(ui.newHeader).offset().top}, 1);
});
},
});
});
hello
i tried the draggable function of jquery ui:
$("div.kind_div").draggable({ cursor: 'crosshair', containment: 'document', appendTo: 'body' });
i can drag the kind_div but it remains into the outer div
I want drag it in all body of my page
how can i do?
thanks
have you tried setting containment to window ?
You need to change the overflow to none or hidden for it to work ..
also the 'outer' div must not be relative positioned ..