Develop Reference

Amcharts - sortable div moves when chart scroll bar is scrolled

Further to the question here, I realized using li won't work best for me & hence upon further research & following the example here, I've manged to implement a customized version of draggable div.In the example (quoted in the answer of the question mentioned above), moving the scroll bar of the chart doesn't move the chart. However, implementing the charting by making the div that contains the chart draggable according to (link), trying to scroll the scroll bar movs the div & with it the chart.
In (link), I've commented out the code inside the sortable function as I don't need it which makes it look as below
$(function () {
$(".grid").sortable({
/*tolerance: 'pointer',
revert: 'invalid',
placeholder: 'span2 well placeholder tile',
forceHelperSize: true*/
});
});
In addition, to make the chart not to move when scrolled, I tried adding the below code
$(function () {
$(".grid").sortable({
/*tolerance: 'pointer',
revert: 'invalid',
placeholder: 'span2 well placeholder tile',
forceHelperSize: true*/
cancel: ".amcharts-main-div"
});
});
$(". grid" ).disableSelection();
However, adding the "cancel" & disableSelection() makes the chart immovable.
This is tricky situation. Could I request some guidance on clubbing these two functionalities namely making the div draggable & also when the chart's scroll bar is moved the chart shouldn't move please?

This is pretty simple. The only thing you have to do is replacing the <li> tags with divs.
To keep it running correctly you need to modify the css selector #sortable li to #sortable > div, so it will only apply to the first level children divs and hence not mess up the AmCharts internal divs.
Heres the modified demo.

jquery sortable, IE, and infinite scrolling

check out this fiddle in IE:
http://jsfiddle.net/GA4Qs/108/
notice the style style="position:relative;clear:both;max-height:100px;overflow:auto;"
basically, I want it so that when you scroll and drag down to the bottom of the scrollable div, it will scroll accordingly. The problem is in IE, you will be able to drag the item to the bottom such that it will scroll infinitely
Is there a way to prevent that from happening in IE so that it will stop at the bottom when dragging the sortable item down instead of having it scroll infinitely?

I don't know much on this subject but you can use the containment option that JQuery has on its movable objects Like so:
$('#psP').sortable({
placeholder: "ui-state-highlight",
helper:'clone',
containment: "parent"
});
Also remove Overflow:auto;
here is your updated jsFiddle.
NOTE: you will need to fiddle around with the sizes of things as with the fiddle i gave you it doesn't allow you to drop into the sortable area. this is due to the containment area and the sizes of your DIV's. It shouldn't be to hard to figure out.
I Hope this is what you were looking for.

$(".sortable_portlets").sortable({
connectWith: ".portlet-drag",
revert: 'true',
items: ".sortable_portlets",
containment: "document",
axis :'x',
scroll: false,
});
the containment option will limit your scrolling. there are other ways as well.you may set axis to restrict this.

use Overflow :hidden ,containment :'parent' and also if needed restrict with axis : 'x' or 'y' as needed.

Animation jQuery UI draggable element back to starting position

I have an element, let's say a div, that I want to be able to drag and drop into another div. If the element isn't dragged into the other div I would like it to animate back to it's initial position. The draggable divs are relatively positioned. So, my question is what's the best approach? Is there a method in jQuery UI which will allow it to animate back? Or am I going to have to write it? If I do, here's my strategy:
get coordinates of the draggable div on start of drag using $('#draggableElement').css('left'), and $('#draggableElement').css('top')
On drag complete use the jQuery .animate to put it back in place.
Is that strategy correct? Or is there something more efficient I could be doing?

Have a look at this
and maybe the helper of a jquery ui draggable options -> helper.
I think this should help you. If not, please specify your question.

You need to set revert: 'invalid'
example:
$( "#draggablediv" ).draggable({helper : "clone", revert: "invalid" });
the helper:clone makes a clone when you try to drag it, when you dont drop it in the area the revert: "invalid" returns the clone to his start position.
If you want the dragable to return to his position use revert: "true"
Please see http://api.jqueryui.com/draggable/#option-revert

Jquery how to specify which droppable should be used with nested droppable elements

I have a small problem which i can't seem to solve myself.
Look at this fiddle:JSfiddle
This is a basic example of the problem I have.
I have a large div which is a droppable area. Inside this droppable area are multiple other droppable areas.
The inner droppable area should walk trough its code when the element is dropped. Instead the code from the outer div seems to run.
Am i doing something wrong? The area around the divs should stay this way because elements can be placed here (not officially dropped).
I hope my question is clear enough, but I think the fiddler speaks for itself.
P.S. - resizing in this example isn't functioning but is functioning in my development environment.
Rusty and Mark,
Thank you for your replies.
I'm sorry for the confusing resizer. I just removed that from the code.
New Fiddler
Just to clarify things. The box div is a container which has multiple images in it. I am trying to achieve the following:
http://postimage.org/image/qwhtik04f/
The grey dotted boxes are the dropbox2 div from my example.
The space around those drop boxes are dropbox div.
The space with the board is the only place where images may be dropped without anything happening.
The dragged images can snap back to the dropbox2 divs.
If the images are dragged onto the dropbox div, the images should revert.

Setting the greedy: true option on the inner droppable will prevent the event from happening on the outer droppable:
jQuery('#dropbox2').droppable({
greedy: true,
drop: function(event, ui) {
// ...
}
});

Your code has this for the outer <div>:
$("#dropbox").droppable({
drop: function(event, ui) {
ui.draggable.draggable( 'option', 'revert', true );
}
});
This says to set the revert option to true when you drag into the outer <div>. However, when you drop in the smaller <div>, the option is still set to true. All you need to do is change the revert value on your draggable element after a successful drop in your inner <div>:
$("#dropbox2").droppable({
drop: function(event, ui) {
ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
// Add this line
ui.draggable.draggable( 'option', 'revert', false );
}
});
Update:
Mark pointed out that my solution doesn't stop the propagation of the event to the parent container. As his answer shows, you need to add greedy: true in your initial options. The jQuery documentation says:
If true, will prevent event propagation on nested droppables.
That sounds like what you're looking for. You still need to change the revert property on your draggable, since greedy is only set on your droppables and won't affect your draggable reactions.

Combining revert with jQuery draggable/droppable

I'm using the drag and drop plugin with jQuery UI. I'd like to make it so that the draggable container can only be dragged and dropped on the container. In the demonstration:
http://jqueryui.com/demos/droppable/#revert
It has 2 options. One is to revert when it drags to the container, the second is to revert when it isn't dragged to the container.
Is there a way to combine these two? I don't want to be able to drag the #draggable container anywhere where there isn't a #droppable container.

As stated above, I found the solution by adding :
$('#draggable2').remove();
$('#draggable').draggable({ revert: true });