Question

I have become interested in jQuery and jQuery UI libraries for the benefits they provide over a pure JavaScript programming practise.

I am trying to implement a drag and drop GUI for my hobby site.

$('#artOfBeing').draggable ({ 
    containment: '#dataFrame', 
    cursor: 'pointer', 
    snap: '#dataFrame', 
    helper: 'clone' 
});
    
$('#dataFrame').droppable({
    drop: handleDropEvent   
});

I already see benefits of jQuery regarding how easy it was to provide a great method of cloning for the menubar icons on the right (to be dragged to the destination drop div).

When I select the top most icon of the menubar on the right vertical with a mouse; any kind of movement triggers the drag and drop operation. The icon jumps to the containment #div (without a transition animation crossing between the divs (source and destination).

I would to like achieve a smooth transition between the time when I select the icon and moving it to the drop div instead of a straight jump into the content mr. monkey div.

I would also like some information regarding the cancel of a drag and drop operation under way.

Please provide tips regarding how best to learn these issues of jQuery libraries.

EDIT: The solution provided Nabab below has some strange effects. Firstly I get different results depending if I am checking it on a local machine or downloading from the web-host server.

In local tests IE9 functions well and the icon drag is limited to the containment DIV which houses both drag and drop divs. Local execution by FF or Chrome and the results are weird, the drag item behaves strangly.

Online web-server and all of them behave the same way. The containment div is ignored and I can drag the icon whereever I like on the screen which is functional but I would like to constrain the drag within the content and nav divs.

Any ideas as to why such behaviour is taking place?

Answer 1

If you have a containment, it’d be more logical to have your source inside this containement. Why don’t you wrap the central space + the buttons space in a DIV which would become the containment. Performing an animation would be very tough as the position of the item depends on the mouse (which drags it), and if your source is outside the container, I cannot imagine how it would perform this transition…