Here's another small drag and drop example. Since it creates the Draggable on-the-fly, it also needs to clean-up the Draggable on-the-fly, even if updateDrag does not get called and thus the endeffect does not get called. So it connects to mouseup even without an active draggable. Is there a cleaner approach? Thanks, Eric
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <style> .positioned_invisible { visibility: hidden; } </style> <script type='text/javascript' src='MochiKit/MochiKit.js'></script> <script type='text/javascript' src='MochiKit/New.js'></script> <script type='text/javascript' src='MochiKit/Signal.js'></script> <script type='text/javascript' src='MochiKit/DragAndDrop.js'></script> <script type='text/javascript'> connect(window, 'onload', function() { connect('container',"onmousedown",my_mouse_down); } ); function my_mouse_down(event) { var mouse_down_pos = getElementPosition(event.mouse().page, $('container')); var rubberband = DIV({'id':'rubberband','style':"background-color:#468;top:"+mouse_down_pos.y+"px;left:"+mouse_down_pos.x+"px;height:0px;width:0px;position:absolute",'class':'positioned_invisible'}); var drag_handle = DIV({'id':'drag_handle','style':"top:"+mouse_down_pos.y+"px;left:"+mouse_down_pos.x+"px;position:absolute"}); appendChildNodes('container', rubberband, drag_handle); MochiKit.Style.setOpacity(rubberband,0.33); var draggable = new Draggable (drag_handle, {starteffect:function(element) { removeElementClass('rubberband', 'positioned_invisible'); }, onchange:function(draggable) { rubberband.style.top = Math.min(drag_y, mouse_down_pos.y) + "px"; rubberband.style.height = Math.abs(mouse_down_pos.y - drag_y) + "px"; rubberband.style.left = Math.min(drag_x, mouse_down_pos.x) + "px"; rubberband.style.width = Math.abs(mouse_down_pos.x - drag_x) + "px"; }, snap:function(x,y) { drag_y = y; drag_x = x; return [drag_x,drag_y]; } }); draggable.options.endeffect = function(element) { cleanup_rubberband(draggable); } draggable.eventMouseUpAbortDrag = connect(document, 'onmouseup', function(){ cleanup_rubberband(draggable); }); draggable.initDrag(event); return false; } function cleanup_rubberband(draggable) { removeElement('rubberband'); removeElement('drag_handle'); disconnect(draggable.eventMouseUpAbortDrag); draggable.options.endeffect = null; // I assume I should set endeffect to null since the draggable references the endeffect and the endeffect references the draggable? draggable.destroy(); } </script> </head> <body> Drag a rubberbanding rectangle in the div <div id="container" style="top:50px;left:50px;height:300px;width:300px;border:1px solid black;position:relative;cursor:crosshair"> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to mochikit@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit -~----------~----~----~----~------~----~------~--~---
