Monday, January 26, 2009

drag/drop updates

The release of jQuery 1.3.x is a welcome update. As always the jquery team has made solid improvements to the library. The core event system has received a significant overhaul, with things like bubbling triggered events, an internal Event class/object, and of course "live" event delegation. The latter makes my own delegate plugin pretty much obsolete. So please take some time to learn about those new core features as I will not be updating the delegate plugin any longer.

A change in the jQuery 1.3 branch that I pushed for has been released: the bind data argument is passed into the event.special setup function and can be leveraged for setting configurable options. The newest release of the drag special event has 3 options that can be configured in this way.

  • which (default: 1), is used to determine what single button click (event.which) to accept. A value of 0 or anything not numeric, means that any button click (left, middle, or right) can start the dragging. Property can also be set using "jQuery.event.special.drag.which" and the value is captured at the time the drag event is bound.
  • distance (default: 0), is used to define the length in pixels that must be moved before triggering "dragstart." Property can also be set using "jQuery.event.special.drag.distance" and the value is captured at the time the drag event is bound.
  • not (default: ":input"), is used to ignore event.target elements that match the given selector. Property can also be set using "jQuery.event.special.drag.not" and the value is captured at the time the drag event is bound.
// bind a drag event with params, update position $( elems ).bind( 'drag', { which: 3, // only "right" mouse button will start dragging distance: 10, // require 10 pixels of movement before start not: ":input,a" // don't start on form elements or anchor tags }, function( event ){ $( this ).css({ top:event.offsetY, left:event.offsetX }); });

One of the core changes that broke these two plugins was the return value of the jQuery.event.handle function being removed. Instead the event object has a "result" property which holds the value that formerly returned from the function. Some minor changes were required to support both 1.3.x ad well as 1.2.x core code releases.

Downloads - jQuery 1.2.x or 1.3.x required.

Please direct any feedback to http://groups.google.com/group/threedubmedia

Labels: , ,