Thanks again, I appreciate your input, your time, and DragAndDrop.js. My actual application makes use of starteffect, endeffect, and snap (for actually snapping) for numerous types of dragging (create/resize/ move shifts and breaks) so I suspect I end up writing and maintaining less code by using Draggable.
Here's one more swag at the same thing. I know that reaching into the internals of MochiKit.DragAndDrop.Draggable is not a good thing, but this solution cleans up up my application code and avoids circular references, so it's a tradeoff I suspect I'll be willing to make. And one additional piece: I added a check at the start of my_mouse_down to end any currently active dragging (caused by mouse up outside the document). Is that a reasonable 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); var p = MochiKit.DragAndDrop.Draggable.prototype; p.realEndDrag = p.endDrag; p.endDrag = function (event) { this.realEndDrag(event); this.cleanupDrag(); } p.cleanupDrag = function () { if (this.options.removeElementsOnMouseUp) forEach(this.options.removeElementsOnMouseUp, removeElement); if (this.options.destroyOnMouseUp) this.destroy(); } } ); function my_mouse_down(event) { var ds = MochiKit.DragAndDrop.Draggables; if (ds.activeDraggable) { ds.endDrag(event); return; } var mouse_down_pos = getElementPosition(event.mouse().page, $ ('container')); var rubberband = DIV ({'id':'rubberband','class':'positioned_invisible','style':"top:"+mouse_ down_pos.y+"px;left:"+mouse_down_pos.x+"px;height:0px;width: 0px;position:absolute;background-color:#468;"}); 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, { destroyOnMouseUp:true, removeElementsOnMouseUp:['drag_handle', 'rubberband'], starteffect:function(element) { removeElementClass(rubberband, 'positioned_invisible'); }, onchange:function(draggable) { var drag = getElementPosition('drag_handle', 'container'); 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"; }, endeffect:function(element) { var div = DIV({'style':"border:1px solid #888;position:absolute"}); setElementPosition(div, getElementPosition('rubberband', 'container')); setElementDimensions(div, getElementDimensions('rubberband')); appendChildNodes('container', div); }, }); draggable.initDrag(event); if (MochiKit.DragAndDrop.Draggables.drags.length != 1) alert("Wrong number of drags", MochiKit.DragAndDrop.Draggables.drags.length); } </script> </head> <body> Drag a rubberbanding rectangle in the div <div id="container" style="top:50px;left:50px;height:300px;width: 300px;border:2px solid black;position:relative;cursor:crosshair"> </div> </body> </html> On Aug 15, 2006, at 8:45 AM, Thomas Hervé wrote: > > It's interesting, here's some comments: > > * The hack with snap (and the drag_x/drag_y variables) is not very > good. You should use getElementPosition(draggable.element, > $('container')) in onchange and remove the snap option. > > * For the endeffect option, I really don't know. The best is to try > with a memory tracker and see what happens. > > * I don't really see the point of D&D for this example. You don't use > Droppable and you destroy the draggable very quickly. I think it might > not be the good thing for this. Have you looked at the draggable > example using Signal ? It's pretty simple and thus very customizable. > > -- > Thomas > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit -~----------~----~----~----~------~----~------~--~---
