jQuery ui drop (move) elements between tabs -
i want realize moving elements between tabs using jquery ui. if want drop element tab - droppable block (.elements) doesn't catch hover event (outline doesn't want apply), dropping works correctly.
$( "#tabs" ).tabs(); $('.elements').children().draggable({ appendto: 'body', opacity: 0.9, helper: "clone", zindex: 1000, cursorat: { left: 50, top: 20 }, }); // drop needle element $('.elements').droppable({ accept: '.element', tolerance: 'pointer', activeclass: "can-drop", hoverclass: "drop-here", drop: function( event, ui ) { alert('drop'); } }); // drop $('.ui-tabs-nav').children().droppable({ accept: '.element', tolerance: 'pointer', over: function( event, ui ) { $("#tabs").tabs("option", "active", 1); } })
you can see my example on jsfiddle.
can me? how can fix it?
thanks!
i have found answer question: draggable has function reset offsets:
$.ui.ddmanager.prepareoffsets(ui.draggable.draggable('instance'));
worked example here
Comments
Post a Comment