try this new Draggable(newElement,{ handle: 'thehandleID', starteffect: function() { // some function }, endeffect : function () { // some function }, onEnd: function(element,event) { cool(); },// end onEnd onDrag : function() { // some other function } });
this works fine for me, its cross browser and works every time and i use it (with my own functions to stop elements being dragged out of the viewport) HTH Alex ----- Original Message ----- From: "Bobby Brown" <browne...@gmail.com> To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com> Sent: Thursday, May 07, 2009 6:04 AM Subject: [Proto-Scripty] draggable onEnd calling function > > I'm trying to execute a function when an object is done being dragged > (ie: onEnd). The function checks to make sure the draggable is inside > the parent div I want it to stay in. I can get it to work now as long > as I pass no variables to the function. if I do, the function > executes onload, and NOT onEnd. Below is the code. > > var cool = function(){ > /*get position of the draggable and the top left corner of container, > which is a 1x1 div I've fixed in the top corner*/ > var arr = $('barcode_drag').positionedOffset(); > var topleft = $('fixed').positionedOffset(); > > /*get width of container and draggable*/ > var container_width = $('coupon_container').getWidth(); > var barcode_width = $('barcode_image').getWidth(); > > /*get height of container and draggable*/ > var container_height = $('coupon_container').getHeight(); > var barcode_height = $('barcode_image').getHeight(); > > /*checks if it's too far left*/ > if(arr[0] < topleft[0]){ > document.getElementById('barcode_drag').style.left = "0px"; > var left = 0; > } > /*checks if it's too far top*/ > if(arr[1] < topleft[1]){ > document.getElementById('barcode_drag').style.top = "0px"; > var top = 0; > } > > /*checks if it's too far right*/ > if(arr[0] + barcode_width > (topleft[0] + container_width) - 5){ > var temp = container_width - barcode_width - 5; > document.getElementById('barcode_drag').style.left = temp+"px"; > var left = temp; > } > > /*checks if it's too far bottom*/ > if(arr[1] + barcode_height > (topleft[1] + container_height) - 5){ > var temp = container_height - barcode_height - 5; > document.getElementById('barcode_drag').style.top = temp+"px"; > var top = temp; > } > > /*tells user x coordinate of drop*/ > if(typeof left == "undefined"){ > var left = arr[0] - topleft[0]; > } > > /*tells user y coordinate of drop*/ > if(typeof top == "undefined"){ > var top = arr[1] - topleft[1]; > } > > /*tell user where image is*/ > document.getElementById('barcode_x').innerHTML = "Left:"+left+"px"; > document.getElementById('barcode_y').innerHTML = "Top:"+top+"px"; > > /*set input so refresh doesn't reset position*/ > document.getElementById('barcode_left').value = left; > document.getElementById('barcode_top').value = top; > } > > var options = { onEnd : cool}; > new Draggable ('barcode_drag', options); > > > It is right here at the end I have the problem. This way works fine, > but if I put > > var options = { onEnd: cool()}; > > it doesn't execute properly. I'd like to be able to pass variables > into the "cool" function so I don't have to write a new one to > constrain every one of my draggables. > > Thanks in advance for any help! > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---