jQuery UI Draggable Tips
erics, Posted April 25th, 2011 at 12:03:13pm
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// // set options in advance for re-use later // the helper function takes the place of: // helper: 'clone', // and now assigns the clone to a variable // so we can cancel it later with the escape key // var dragOptions = { helper: function() { draggedClone = jQuery(this).clone(); return draggedClone; }, revert:'invalid', snap: true, snapMode: 'inner', containment: "#wrapper" }; jQuery(document).ready(function() { // // do these things after the document is fully loaded // // attach the draggable feature to the desired element jQuery('.draggable').draggable(dragOptions); // capture the escape ket to cancel the drag via the keyboard jQuery(document).keyup(function(e) { if (e.keyCode == 27) { draggedClone.trigger("mouseup"); return false; } }); }); |
Categories: How-To's, Technology Draggable, Escape, Escape key, JQuery, jQuery UI
Leave Your Comment
All fields marked with "*" are required.