Question

So what I’m trying to do is create an effect similar to when you drag and app icon on an iPad/iPhone to another section of the screen.

So using jQuerys UI sortable is there a way to detect if the item being dragged is outside/touching the edge of the container and then scroll over to the next screen. (I am currently using the jQuery cycle plugin for the scrolling part).

Would this be the best way to get this type of functionality or are there other, better ways of doing this?

The link below is what I have so far

http://jsfiddle.net/7fPe6/1/

Any help is really appreciated!

Many thanks

Answer 1

Here ya go:

$(function() {
    $(".block").draggable({ 
        drag: function(event, ui) {
            if(ui.offset.left > $(this).parent().width() 
               && $(this).parent().get(0).id == 'areaOne'){
                //console.log('out of bounds');
                $('#next2').trigger('click');
                var next = $(this).parent().next();
                $(this).appendTo(next);
                $(this).css({
                    left: ui.position.left,
                    top: ui.position.top
                })

            } 
            else if(ui.offset.left < 0 - $(this).width()
               && $(this).parent().get(0).id == 'areaTwo'){
               // console.log('out of bounds');
                $('#prev2').trigger('click');
                var next = $(this).parent().prev();
                $(this).appendTo(next);
                $(this).css({
                    left: ui.position.left,
                    top: ui.position.top
                })

            } 
        }
    });

    $('#appContentHold').cycle({
        fx: 'scrollHorz',
        timeout: 0,
        next: '#next2',
        prev: '#prev2',
        nowrap: 1

    });

    $('#goto2').click(function() {
        $('#appContentHold').cycle(1);
        return false;
    });

});

Fiddle: http://jsfiddle.net/maniator/Az5kw/