Starbow Consulting

Home Tao's Blog Contact Search

Home

Tao's Blog

Contact

Home » Blogs » tao's blog Notes on Drag & Drop with Interface Submitted by tao on Mon, 2007-04-23 11:10 ajax Drupal _Damn, just lost my first version of this post. I need to see about getting the autosave module working_ I am working to wrap my brain around Drag & Drop in Drupal. "Interface":http://interface.eyecon.ro, the jQuery UI plug-in, seems like the best place to start. I am using jjeff's "expiremental jQuery Update modules":http://groups.drupal.org/node/3576 so I can use the latest version (v1.2). I have also looked at the Ext UI library, and it looks really cool, much slicker than Interface, but it is also much bigger. People are already freaking out about Interface's 80K footprint, and just the D&D and tree parts of Ext weigh in at ~150K Interface is made of a bunch of modular, single purpose scripts that extend the jQuery object to add behaviors. *idrag.js* Adds the Draggable behavior, which turns a normal element into one that can be dragged around the page and dropped onto droppables. All the behavoirs take an hash of options (some): * ghosting: true = drag a copy of the element * revert: true = put the element back after dragging * opacity: 0-1 opacity of element while it is being dragged * axis: 'vertically' or 'horizontally' - limit dragging motion * onStart, onStop, onChange, onDrag - callbacks *idrop.js* Adds the Droppable behavior, which turns an element into a dropzone for draggable elements. (some) * accept(required): class name of draggables this dropzone accepts. * activeClass: class to add to this dropzone when an acceptable draggable is moved. Used to highlight all valid dropzones. * hoverClass: same, but only when the draggable is inside of dropzone. Used to say - go ahead and drop here. * tolerance: pointer, intersect or fit - how exact to be when catching dropped dragable. * onDrop, onHover, onOut - callbacks which pass in the draggable. *isortables.js* Adds Sortable behavior, which builds on-top of draggable and droppable. A sortable element is both draggable itself and defines a dropzone for other elements. This is the interesting one to me. Here is a "nice demo":http://interface.eyecon.ro/demos/sort.html. Options: * accept (required): The class name for items inside the container * activeclass: The class for the container when one of its items has started to move. * hoverclass: The class for the container when an acceptable item is inside it. * helperclass: The helper is used to point to the place where the item will be moved. This is the class for the helper. _I need to figure out more about this one_. * opacity: Opacity (between 0 and 1) of the item while being dragged. _not sure why this isn't just a class_ * ghosting: When true, the sortable is ghosted when dragged. * axis: 'horizontally' or 'vertically' * tolerance: Either 'pointer', 'intersect', or 'fit'. * fit: When true, sortable must be inside the container in order to drop. * containment: Use 'parent' to constrain the drag to the container. * fx: Duration for the effect applied to the sortable. _I don't get this one yet_ * onStart, onStop : callbacks for when element starts/stops being dragged. * onHover, onOut, : callbacks for when element is active as a dropzone, draggable is the argument. * onChange: Callback that gets called when the sortable list changed. argument is array of serialized elements. *iautoscroller.js* Used to scroll the page on dragging dragables. Example: onStart : function() { $.iAutoscroller.start(this, document.getElementsByTagName('body')); }, onStop : function() { $.iAutoscroller.stop(); } tao's blog Add new comment #1 Submitted by Anonymous on Tue, 2007-06-05 21:32. Nice article Very nice article on drag and drop with jquery. Thanks suresh.gju@starbowconsulting.com reply Comment viewing options Flat list - collapsed Flat list - expanded Threaded list - collapsed Threaded list - expanded Date - newest first Date - oldest first 10 comments per page 30 comments per page 50 comments per page 70 comments per page 90 comments per page 150 comments per page 200 comments per page 250 comments per page 300 comments per page Select your preferred way to display the comments and click "Save settings" to activate your changes.

Notes on Drag & Drop with Interface Submitted by tao on Mon, 2007-04-23 11:10 ajax Drupal _Damn, just lost my first version of this post. I need to see about getting the autosave module working_ I am working to wrap my brain around Drag & Drop in Drupal. "Interface":http://interface.eyecon.ro, the jQuery UI plug-in, seems like the best place to start. I am using jjeff's "expiremental jQuery Update modules":http://groups.drupal.org/node/3576 so I can use the latest version (v1.2). I have also looked at the Ext UI library, and it looks really cool, much slicker than Interface, but it is also much bigger. People are already freaking out about Interface's 80K footprint, and just the D&D and tree parts of Ext weigh in at ~150K Interface is made of a bunch of modular, single purpose scripts that extend the jQuery object to add behaviors. *idrag.js* Adds the Draggable behavior, which turns a normal element into one that can be dragged around the page and dropped onto droppables. All the behavoirs take an hash of options (some): * ghosting: true = drag a copy of the element * revert: true = put the element back after dragging * opacity: 0-1 opacity of element while it is being dragged * axis: 'vertically' or 'horizontally' - limit dragging motion * onStart, onStop, onChange, onDrag - callbacks *idrop.js* Adds the Droppable behavior, which turns an element into a dropzone for draggable elements. (some) * accept(required): class name of draggables this dropzone accepts. * activeClass: class to add to this dropzone when an acceptable draggable is moved. Used to highlight all valid dropzones. * hoverClass: same, but only when the draggable is inside of dropzone. Used to say - go ahead and drop here. * tolerance: pointer, intersect or fit - how exact to be when catching dropped dragable. * onDrop, onHover, onOut - callbacks which pass in the draggable. *isortables.js* Adds Sortable behavior, which builds on-top of draggable and droppable. A sortable element is both draggable itself and defines a dropzone for other elements. This is the interesting one to me. Here is a "nice demo":http://interface.eyecon.ro/demos/sort.html. Options: * accept (required): The class name for items inside the container * activeclass: The class for the container when one of its items has started to move. * hoverclass: The class for the container when an acceptable item is inside it. * helperclass: The helper is used to point to the place where the item will be moved. This is the class for the helper. _I need to figure out more about this one_. * opacity: Opacity (between 0 and 1) of the item while being dragged. _not sure why this isn't just a class_ * ghosting: When true, the sortable is ghosted when dragged. * axis: 'horizontally' or 'vertically' * tolerance: Either 'pointer', 'intersect', or 'fit'. * fit: When true, sortable must be inside the container in order to drop. * containment: Use 'parent' to constrain the drag to the container. * fx: Duration for the effect applied to the sortable. _I don't get this one yet_ * onStart, onStop : callbacks for when element starts/stops being dragged. * onHover, onOut, : callbacks for when element is active as a dropzone, draggable is the argument. * onChange: Callback that gets called when the sortable list changed. argument is array of serialized elements. *iautoscroller.js* Used to scroll the page on dragging dragables. Example: onStart : function() { $.iAutoscroller.start(this, document.getElementsByTagName('body')); }, onStop : function() { $.iAutoscroller.stop(); } tao's blog Add new comment

Notes on Drag & Drop with Interface Submitted by tao on Mon, 2007-04-23 11:10 ajax Drupal

ajax

Drupal

_Damn, just lost my first version of this post. I need to see about getting the autosave module working_

I am working to wrap my brain around Drag & Drop in Drupal. "Interface":http://interface.eyecon.ro, the jQuery UI plug-in, seems like the best place to start. I am using jjeff's "expiremental jQuery Update modules":http://groups.drupal.org/node/3576 so I can use the latest version (v1.2).

I have also looked at the Ext UI library, and it looks really cool, much slicker than Interface, but it is also much bigger. People are already freaking out about Interface's 80K footprint, and just the D&D and tree parts of Ext weigh in at ~150K

Interface is made of a bunch of modular, single purpose scripts that extend the jQuery object to add behaviors.

*idrag.js* Adds the Draggable behavior, which turns a normal element into one that can be dragged around the page and dropped onto droppables. All the behavoirs take an hash of options (some):

* ghosting: true = drag a copy of the element * revert: true = put the element back after dragging * opacity: 0-1 opacity of element while it is being dragged * axis: 'vertically' or 'horizontally' - limit dragging motion * onStart, onStop, onChange, onDrag - callbacks

*idrop.js* Adds the Droppable behavior, which turns an element into a dropzone for draggable elements. (some)

* accept(required): class name of draggables this dropzone accepts. * activeClass: class to add to this dropzone when an acceptable draggable is moved. Used to highlight all valid dropzones. * hoverClass: same, but only when the draggable is inside of dropzone. Used to say - go ahead and drop here. * tolerance: pointer, intersect or fit - how exact to be when catching dropped dragable. * onDrop, onHover, onOut - callbacks which pass in the draggable.

*isortables.js* Adds Sortable behavior, which builds on-top of draggable and droppable. A sortable element is both draggable itself and defines a dropzone for other elements. This is the interesting one to me. Here is a "nice demo":http://interface.eyecon.ro/demos/sort.html. Options:

* accept (required): The class name for items inside the container * activeclass: The class for the container when one of its items has started to move. * hoverclass: The class for the container when an acceptable item is inside it. * helperclass: The helper is used to point to the place where the item will be moved. This is the class for the helper. _I need to figure out more about this one_. * opacity: Opacity (between 0 and 1) of the item while being dragged. _not sure why this isn't just a class_ * ghosting: When true, the sortable is ghosted when dragged. * axis: 'horizontally' or 'vertically' * tolerance: Either 'pointer', 'intersect', or 'fit'. * fit: When true, sortable must be inside the container in order to drop. * containment: Use 'parent' to constrain the drag to the container. * fx: Duration for the effect applied to the sortable. _I don't get this one yet_ * onStart, onStop : callbacks for when element starts/stops being dragged. * onHover, onOut, : callbacks for when element is active as a dropzone, draggable is the argument. * onChange: Callback that gets called when the sortable list changed. argument is array of serialized elements.

*iautoscroller.js* Used to scroll the page on dragging dragables. Example:

Add new comment

#1 Submitted by Anonymous on Tue, 2007-06-05 21:32. Nice article Very nice article on drag and drop with jquery. Thanks suresh.gju@starbowconsulting.com reply

Very nice article on drag and drop with jquery.

Thanks suresh.gju@starbowconsulting.com

Recent Drupal Posts Working at GoingOn Networks BADCamp 2010 Notes from BADCamp Eclipse Installfest Welcome to BADCamp 2009 Example from Intro to Module Development Presentation Quick WYSIWYG with Image uploading recipe more Recent comments Hi Tao! Can you post 51 weeks 3 days ago Mayk Brito on: Working at GoingOn Networks No way 51 weeks 3 days ago tao on: Mysqldump and Unicode This only works for the first item in a node reference results.. 1 year 2 weeks ago Anonymous on: Reverse Node References On drupal.org? 1 year 3 weeks ago Simon on: Wikis in Drupal 6 - Module R... $form_state in Drupal 6 1 year 6 weeks ago vagkavan on: The best way to show results... more Tweets by @tstarbow #BADcamp opening my mind to the wonders of Drush 5...which is tricky as @stephthegeek mixes a serious cocktail. 2 weeks 1 day ago Ha #BADcamp finally capped registration at 1500! Could be a little crowded tomorrow :) 2 weeks 1 day ago Got the test servers working in time to go to the #BADcamp core summit. Yay. I feel smarter just being in the room. 2 weeks 2 days ago Loving the JenkinsCI MatrixReloaded plugin! No more editing the filter just to rerun a couple failed builds. 20% less cursing at work. 4 weeks 4 days ago 1 of 54 ›› Follow me on Twitter Today's popular content Tom Jones & Mousse T - Sexbomb (60) Setting up Eclipse PDT and XDebug (35) Working at GoingOn Networks (21) Reverse Node References (21) Private Uploads and Popup modules updated (20) more User login Username: * Password: * Request new password

Working at GoingOn Networks

BADCamp 2010

Notes from BADCamp Eclipse Installfest

Welcome to BADCamp 2009

Example from Intro to Module Development Presentation

Quick WYSIWYG with Image uploading recipe

Hi Tao! Can you post 51 weeks 3 days ago Mayk Brito on: Working at GoingOn Networks

No way 51 weeks 3 days ago tao on: Mysqldump and Unicode

This only works for the first item in a node reference results.. 1 year 2 weeks ago Anonymous on: Reverse Node References

On drupal.org? 1 year 3 weeks ago Simon on: Wikis in Drupal 6 - Module R...

$form_state in Drupal 6 1 year 6 weeks ago vagkavan on: The best way to show results...

#BADcamp opening my mind to the wonders of Drush 5...which is tricky as @stephthegeek mixes a serious cocktail. 2 weeks 1 day ago

Ha #BADcamp finally capped registration at 1500! Could be a little crowded tomorrow :) 2 weeks 1 day ago

Got the test servers working in time to go to the #BADcamp core summit. Yay. I feel smarter just being in the room. 2 weeks 2 days ago

Loving the JenkinsCI MatrixReloaded plugin! No more editing the filter just to rerun a couple failed builds. 20% less cursing at work. 4 weeks 4 days ago

1 of 54

Tom Jones & Mousse T - Sexbomb (60)

Setting up Eclipse PDT and XDebug (35)

Working at GoingOn Networks (21)

Reverse Node References (21)

Private Uploads and Popup modules updated (20)

Request new password