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" <[email protected]>
To: "Prototype & script.aculo.us" <[email protected]>
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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
