Drag Extension Example

Event listeners have been added to the elements below to show the use of Jude's quasiEvents that pertain to certain extensions and widgets. In the case of the Drag Extension, three quasiEvents exist: 'draggrab', 'dragmove', and 'dragdrop'.

Basic Source Code

This is a simplified set of code; view the actual source code to see everything that's going on.

jude.include( "ext.drag", "ext.event" ) ;
jude.onload = function() {
    myElm = E( "<DIV>", 200, 110, 100, 100,
		"Drag me.", "background:#9cf; border:1px solid" ).appendTo() ;
    myElm.setDrag( true ) ;
    myElm.aE( "draggrab", handler ) ;
    myElm.aE( "dragdrop", handler ) ;
};

function handler(e) {
    if( e.type == "draggrab" ) e.currentTarget.style.background = "#fc9" ;
    else e.currentTarget.style.background = "#9cf" ;
};