tag:blogger.com,1999:blog-3378072847676993592.post3287891795486139195..comments2009-03-17T12:19:14.976-04:00Comments on threedubmedia: $.event.special.drag3wmehttp://www.blogger.com/profile/04370181316121086749noreply@blogger.comBlogger28125tag:blogger.com,1999:blog-3378072847676993592.post-31960212731053996012009-03-10T09:37:00.000-04:002009-03-10T09:37:00.000-04:00:D I've always loved this plugin.BEST D&D ...:D I've always loved this plugin.<BR/><BR/>BEST D&D api in the world. This is how I would hope to code it myself.<BR/><BR/>I tried to use jQuery UI for complex things like snapping behaviors. But jQuery UI is sadly slow and bloated.<BR/><BR/>Might be nice for the unwashed masses. But I don't think jQuery needs a monolithic plugin library. Smarter, more concise pieces are where its at!Collinhttps://www.blogger.com/profile/11168270330036893286noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-8303717164024136472009-03-07T07:03:00.000-05:002009-03-07T07:03:00.000-05:00Hi, i'm using your plugin for make element drag!! ...Hi, i'm using your plugin for make element drag!! thanks by the code :)<BR/><BR/>so.. i think i found a problem... when my 'startdrag' function, return false, indicating that nothing is dragged.. the plugin don't detach de events mousemove and mouseup of the document, so the drag can't be stopped or restarted. because of this, the chaining of more than one drag listeners is stopped.<BR/><BR/>it's a problem?<BR/><BR/>sorry my bad english! i'm learning :)<BR/><BR/>Thanksfantasticomundodeadolfohttps://www.blogger.com/profile/07656504460753052248noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-63547625047079386442009-03-06T19:21:00.000-05:002009-03-06T19:21:00.000-05:00I want to reiterate that I'm having the same probl...I want to reiterate that I'm having the same problem as Max w/ IE. When the user goes outside of the document area, the drag temporarily stops, then resumes once the user comes back into the document area (even if the mouse button has been released). Anyone found a workaround for this?<BR/><BR/>Thanks!<BR/>BrianAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-79184697087394001172009-02-16T03:04:00.000-05:002009-02-16T03:04:00.000-05:00Nice tips :-) Thanks!I found that using offsetX an...Nice tips :-) Thanks!<BR/><BR/>I found that using offsetX and offsetY for top-left is not enough if we're using margin-top and margin-left. so, I try this:<BR/><BR/> var top = parseInt(parent.css("margin-top"));<BR/> var left = parseInt(parent.css("margin-left"));<BR/> $(this).parent().css({ top: event.offsetY - top, left: event.offsetX - left });<BR/><BR/><BR/>Hope that it can help if you get the same problem.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-75933972493428077012009-02-12T15:43:00.000-05:002009-02-12T15:43:00.000-05:00If you use a proxy element, the click event does n...If you use a proxy element, the click event does not fire, otherwise you need to programmatically determine when to prevent clicks... Sorry, there is no way to stopPropagation, as they are completely seperate events that are firing and bubbling.3wmehttps://www.blogger.com/profile/05248963700617679287noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-33078955629115480352009-02-11T12:34:00.000-05:002009-02-11T12:34:00.000-05:00thanks for a beautiful and useful plugin. I'm havi...thanks for a beautiful and useful plugin. I'm having one problem with it though which I was hoping someone can help me fix.<BR/><BR/>I have an element foo, which the user can interact with by both dragging, or clicking.<BR/><BR/>I have <BR/>$("foo").bind('dragend', dragged());<BR/>$("foo").bind('click', clicked());<BR/><BR/>dragged() and clicked() are functions that do different things. When foo is clicked (without dragging), then clicked() is executed and there's no problem.<BR/><BR/>The problem is when foo is dragged, dragged() gets executed, but then clicked() is also executed as well.<BR/><BR/>Is there a way to handle "click" and "dragend" events separately?SGhttps://www.blogger.com/profile/15645413380285735365noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-71675480643873478082009-01-15T10:21:00.000-05:002009-01-15T10:21:00.000-05:00I have problems with this plugin and new released ...I have problems with this plugin and new released jQuery 1.3. Any plans for updating this awesome plugin "special.drag"???<BR/><BR/>thanxs in advance...Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-75229137666371187392008-12-09T00:56:00.000-05:002008-12-09T00:56:00.000-05:00another amazing plugin! one quick observation, on ...another <I>amazing</I> plugin! one quick observation, on IE7 (likely 6 as well, hopefully not 8 but hope and IE in the same phrase usually leads to laughter, so assume the worst) if one maintains a drag and releases the button out of the window, the dragend callback is not sent. this becomes a problem when the cursor is moved back the window, the drag callback continues to be called for normal mousemoves - leaving us in a bit of a zombie drag state after the button had been released.<BR/><BR/>i'm not a huge fan of browser specific workarounds, part of me feels going to great lengths to do so only allows poor implementations of html/css/js to continue to limp along, but i suspect a reasonable workaround (though not likely appropriate for the plugin itself) would be to add an event listener for mouseout on the document and perform the dragend there.<BR/><BR/><BR/><BR/>all these great plugins, i do wonder what you've put them together to create...Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-82734467322002435142008-10-29T15:40:00.000-04:002008-10-29T15:40:00.000-04:00helloThank you for this pluggin, it's working grea...hello<BR/><BR/>Thank you for this pluggin, it's working great!<BR/><BR/>I had just one issue:<BR/><BR/>IE7 TextRange (document.selection.TextRange object) implementation breaks (or breaks jquery..) when doing DOM manipulation inside an active range (like creating the dragProxy).<BR/><BR/>I fixed adding the line:<BR/><BR/>if ($.browser.msie) document.selection.empty(); // IE again...<BR/><BR/>To the selectable(elem, bool) function.<BR/><BR/>Now it works great!<BR/><BR/><BR/>Thanks a lot for the pluggin!José Matahttps://www.blogger.com/profile/17545860569531393263noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-91142781416045268342008-10-28T07:54:00.000-04:002008-10-28T07:54:00.000-04:00Nice stuff! :)I did manage to find an edge case wh...Nice stuff! :)<BR/><BR/>I did manage to find an edge case where I couldn't use this library, but also found a fix. The next mousemove event was called before the browser managed to repaint everything (which happens with a large tiled map or image).<BR/><BR/>Hence my feature request: using timers. This can reduce the number of times 'mousemove' is called. Each time the timer is fired, the offset since the previous call should be returned.<BR/><BR/>This was my final code:<BR/><BR/>---------------------------------<BR/><BR/> // Enable mouse dragging.<BR/> window._moveTimer = 0;<BR/> window._newX = 0;<BR/> window._newY = 0;<BR/> window._dragOrigin = null;<BR/> window._dragCursorX = null;<BR/> window._dragCursorY = null;<BR/> window._dragNewCursorX = null;<BR/> window._dragNewCursorY = null;<BR/><BR/> $("#dragViewport").mousedown(<BR/> function( startEvent )<BR/> {<BR/> window._dragOrigin = __getMyViewportPosition(); // My function, returns x/y<BR/> window._dragCursorX = startEvent.pageX;<BR/> window._dragCursorY = startEvent.pageY;<BR/> $(this).addClass("dragged");<BR/><BR/> $(document).mousemove( _dragMove ).mouseup( _dragEnd );<BR/> }<BR/> );<BR/><BR/> function _dragMove( moveEvent )<BR/> {<BR/> // Get new position.<BR/> // Calculate own offset, not using moveEvent.offsetX here.<BR/> // Avoids 'swing' due repaining time.<BR/> window._dragNewCursorX = moveEvent.pageX;<BR/> window._dragNewCursorY = moveEvent.pageY;<BR/> window._newX = ( window._dragOrigin.x - ( window._dragNewCursorX - window._dragCursorX ) );<BR/> window._newY = ( window._dragOrigin.y - ( window._dragNewCursorY - window._dragCursorY ) );<BR/><BR/> // Delay move, allow repaints.<BR/> if( window._moveTimer ) return;<BR/> window._moveTimer = setTimeout( function()<BR/> {<BR/> clearTimeout( window._moveTimer );<BR/> __setMyViewportPosition( window._newX, window._newY ); // My function<BR/> window._moveTimer = 0;<BR/><BR/> // Reset origin, reduces the effect of fast mouse moves.<BR/> window._dragOrigin = { x: window._newX, y: window._newY };<BR/> window._dragCursorX = window._dragNewCursorX;<BR/> window._dragCursorY = window._dragNewCursorY;<BR/> }, 20 );<BR/> }<BR/><BR/> function _dragEnd( endEvent )<BR/> {<BR/> $(this).removeClass("dragged");<BR/> $(document).unbind("mousemove mouseup");<BR/> }<BR/><BR/>---------------------------------<BR/><BR/>I hope you can incorporate the intent of this code in your library. :)Diederik van der Boorhttps://www.blogger.com/profile/11435808496879023545noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-63421492796967075172008-10-25T18:23:00.000-04:002008-10-25T18:23:00.000-04:00is there any way to prevent the click event when t...is there any way to prevent the click event when the drag is finished? thx for your helpAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-57590866317580314932008-10-20T03:58:00.000-04:002008-10-20T03:58:00.000-04:00Works like a charm in FF, but somehow IE7 is compl...Works like a charm in FF, but somehow IE7 is completely off limits for this one. Will this be fixed?Kasper FPhttps://www.blogger.com/profile/10784253342075823784noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-23879359627011018752008-10-17T14:45:00.000-04:002008-10-17T14:45:00.000-04:00you are right about my loops, i was just trying so...you are right about my loops, i was just trying something ..<BR/><BR/>thx for clearing this up for meAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-20599099734765013272008-10-17T10:03:00.000-04:002008-10-17T10:03:00.000-04:00@sarco,I am not sure what the issue you are having...@sarco,<BR/><BR/>I am not sure what the issue you are having is, can you provide a test page or reproducible example of the symptoms.<BR/><BR/>@magerio<BR/><BR/>Not sure what you mean about drag handles... this plugin only provides hooks for you, the developer, to determine handles. The "is" method takes simple non-hierarchical css selector expressions as an argument. <BR/><BR/>The use of the dollar sign alias in the plugin code is safe because the code is wrapped in a function closure that gets passed jquery as an argument.<BR/><BR/>It is not recommended to use "for ... in" to iterate over arrays. Plus, jQuery can take multiple comma seperated selectors (just like css) in it's selector argument. And you could use a simple css selector to determine the handle. I would refine you code as follows...<BR/><BR/>$('#window1, #window2')<BR/> .bind('dragstart',function( event ){<BR/> return $(event.target).is('.window-title');<BR/> })<BR/> .bind('drag',function( event ){<BR/> $( this ).css({<BR/> top: event.offsetY,<BR/> left: event.offsetX<BR/> });<BR/> });3wmehttps://www.blogger.com/profile/05248963700617679287noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-84505344517430531192008-10-17T05:20:00.000-04:002008-10-17T05:20:00.000-04:00well, i use this code for apending drag now, which...well, i use this code for apending drag now, which is not bad ...but :)<BR/><BR/>var windows = ['#window1','#window2']; //etc<BR/>for(i in windows) {<BR/>$(windows[i])<BR/> .bind('dragstart',function( event ){<BR/> return $(event.target).is($(windows[i] + ' > .window-title').html());<BR/> })<BR/> .bind('drag',function( event ){<BR/> $( this ).css({<BR/> top: event.offsetY,<BR/> left: event.offsetX<BR/> });<BR/> });<BR/>}Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-88367048592800573482008-10-17T05:15:00.000-04:002008-10-17T05:15:00.000-04:00hey, thx for this great plugin, its just what i ne...hey, thx for this great plugin, its just what i needed : im writing app with many dialog window, they all have the same html structure, styled by css, every window has a title with different text which i want to use as handle for drag, but heres the problem: you in some way use text in .is() function to append the drag handle .. wouldnt it be easier to give there option to use jQuery selectors? Or am i getting this wrong?<BR/><BR/>Also there is another "problem" (just a little one): you use this construction to extend jQuery: $.fn.drag = ...., wouldnt it be better to use the recommended one: jQuery.fn.drag ? just a suggestion, nothing moreAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-81326396935397867802008-10-16T14:32:00.000-04:002008-10-16T14:32:00.000-04:00Hey Again,I noticed that this totally junks itself...Hey Again,<BR/><BR/>I noticed that this totally junks itself when NOT used with;<BR/>position:absolute<BR/><BR/>Is there a way to fix that? I've been playing around with it to no luck but I'm trying to see what I can do.Serylhttps://www.blogger.com/profile/02626838843264362746noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-71459017800434855362008-10-06T14:32:00.000-04:002008-10-06T14:32:00.000-04:00Sarco, you are absolutely correct. That incorrect ...Sarco, you are absolutely correct. That incorrect behavior could also be seen in my own "proxy" demo. This was such a major bug that I released another update today.<BR/><BR/>Please check out the new 1.2 release!3wmehttps://www.blogger.com/profile/04370181316121086749noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-46445146838690133162008-10-06T13:33:00.000-04:002008-10-06T13:33:00.000-04:00Just wanted to let you know, with the new changes ...Just wanted to let you know, with the new changes this thing rocks. <BR/><BR/>Very quick, minimal, flexible.. exactly what I needed!<BR/><BR/>Thanks!Elijah Insuahttps://www.blogger.com/profile/14783537464326674401noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-18510647867108461132008-10-05T10:25:00.000-04:002008-10-05T10:25:00.000-04:00Sarco,I just upgrade everything seems fine. I'm u...Sarco,<BR/><BR/>I just upgrade everything seems fine. I'm using both position:absolute and regular elements for dragging. Perhaps if you pasted a minimal example of your code to reproduce someone could come up with a fix for ya.Elijah Insuahttps://www.blogger.com/profile/14783537464326674401noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-23788535548202828472008-10-04T04:53:00.000-04:002008-10-04T04:53:00.000-04:00I just wanted to note... that since it changed fro...I just wanted to note... that since it changed from 1.0 to 1.1, there's an issue with dragging. It changes the location of the original object by a pixel or so in the direction of the drag (when using a proxy).Serylhttps://www.blogger.com/profile/02626838843264362746noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-39695567692561466952008-10-03T15:01:00.000-04:002008-10-03T15:01:00.000-04:00Please try the new 1.1 release...- Fixed a bug whe...Please try the new 1.1 release...<BR/><BR/>- Fixed a bug where the text-selection attributes that were disabled on <BR/>"mousedown" were not being enabled on "mouseup" unless the element was dragged.<BR/><BR/>- Now restoring the event.target property that is captured on "mousedown" before <BR/>handling "dragstart" events. This fixes buggy behavior involving "dragstart" <BR/>and the "distance" setting, and attempting to capture "handle" elements.<BR/><BR/>- Modified the handler logic for the "dragstart" return value. The stack can <BR/>now continue directly into the "drag" handler call from "dragstart" instead of <BR/>waiting for the next "mousemove" event to fire. <BR/><BR/>- Added a "not" property to the "jQuery.event.special.drag" object which allows <BR/>the prevention of drag behavior for any event.target element that matches the <BR/>property value (selector). The default value is ":input" and when jQuery 1.3 is <BR/>released, this attribute will also be customizable through the "bind" method<BR/>using the optional "data" argument. Thanks to Elijah Insua for suggesting this<BR/>feature.<BR/><BR/>- Changed binding of "mousemove" and "mouseup" events from "document.body" to <BR/>"document"... This fixes buggy behavior when the body element does not cover <BR/>the entire window. Thanks to Jonah Fox (weepy) and Elijah Insua for pointing <BR/>out this bug.3wmehttps://www.blogger.com/profile/04370181316121086749noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-44549325971822693012008-10-01T12:11:00.000-04:002008-10-01T12:11:00.000-04:00I'm completely with you on the keeping the code sm...I'm completely with you on the keeping the code small and flexible. That is the reason I'm using this plugin in the firstplace :)<BR/><BR/>However, I tried what you mentioned with limited success. It would seem that by the time the dragstart handler is called, the mousedown event has been handled (without the ability to override) and mousemove event has already been hijacked.<BR/><BR/>I was debating an implementation of a $.dragManager which accepts the same sort of filter as $.dropManager to avoid dragging on certain children elementsElijah Insuahttps://www.blogger.com/profile/14783537464326674401noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-31567050863059224812008-10-01T11:52:00.000-04:002008-10-01T11:52:00.000-04:00Elijah, Thanks for the positive feedback. To answe...Elijah, <BR/><BR/>Thanks for the positive feedback. To answer your points: <BR/><BR/>- You are absolutely correct about document, instead of document.body i have this fixed for the next release.<BR/><BR/>- the idea of this code is deliberately not to overload with features like the suggestion you provide. This drag implementation is intended to be very basic and the developer can manually control things like constraint and snapping and such. That said, to acheive your desired result, the events "dragstart" and "drag" can both return false to cancel the drag action, so that is where you can check event.target for elements.<BR/><BR/>Hope this helps.3wmehttps://www.blogger.com/profile/04370181316121086749noreply@blogger.comtag:blogger.com,1999:blog-3378072847676993592.post-72118203213948192912008-09-30T22:10:00.000-04:002008-09-30T22:10:00.000-04:00I added a:if ($(event.target).filter(":input&...I added a:<BR/><BR/>if ($(event.target).filter(":input").length > 0) { return true; }<BR/><BR/>To jquery.event.drag.js line 49. Basically skips the drag init if it was in fact an input that was clicked.<BR/><BR/>hope this helps someone...Elijah Insuahttps://www.blogger.com/profile/14783537464326674401noreply@blogger.com