make a div draggable on if condition is true?

Question

I have a div which should be a draggable. Below is the code,

$( "#SpeedDraggable" ). draggable
({
    axis: "y",
    containment:'parent',
        drag: function(event, ui)
        {
           var Startpos = $(this).position();
           $("#SpeedText").text(184-Startpos.top).css('color','#DDDDDD');              
        },
    stop: function(event, ui) 
    {
       var Stoppos = $(this).position();
       $("#SpeedText").text(184-Stoppos.top).css('color','#DDDDDD');
    }
    });

The Requirement is that above logic should happen under this if condition

if($("#imgManualSetting_Pressed").is(":visible"))
{

}

If this condition is not true, Then the div should not be draggable. Kindly help me how to do this... Thanks in advance !!

Thanks for the response but i dont find much about draggable handler. Could u provide a sample code of doing what u said... pls — swati, Feb 19 '13 at 05:25
I meant, the `.draggable()` you've written, put it inside the `if` block — painotpi, Feb 19 '13 at 06:03

score 2 · Answer 1 · answered Feb 19 '13 at 05:52

$( "#SpeedDraggable" ). draggable
({
    axis: "y",
    containment:'parent',
    drag: function(event, ui)
    {
        if($("#imgManualSetting_Pressed").is(":visible"))
        {
            var Startpos = $(this).position();
                $("#SpeedText").text(184-Startpos.top).css('color','#DDDDDD');  
        }
        else
       {
                return false;            
       }                    
    }

});

score 1 · Answer 2 · answered Feb 19 '13 at 05:31

1

if($("#imgManualSetting_Pressed").is(":visible")) {
    // set to draggable widget
    $( "#SpeedDraggable" ).draggable({
        axis: "y",
        containment:'parent',
            drag: function(event, ui)
            {
               var Startpos = $(this).position();
               $("#SpeedText").text(184-Startpos.top).css('color','#DDDDDD');              
            },
        stop: function(event, ui) 
        {
           var Stoppos = $(this).position();
           $("#SpeedText").text(184-Stoppos.top).css('color','#DDDDDD');
        }
    });
}
else {
    // destroy draggable if not
    $( "#SpeedDraggable" ).draggable( "destroy" );
}

answered Feb 19 '13 at 05:31

cwdoh

196
10

This logic i knew. But my problem is where in the js file would i place this code. However i got the solution. Kindly take a look over the answer i post – swati Feb 19 '13 at 05:51
it's up to you. I can't find that place without enough code sample. Which event or function changes "imgManualSetting_Pressed"'s ":visible"? it might be a place of this code. for example, you use $(element).show() or $(element).css("display", "block"), $(element).css("visibility","hidden") and so on. – cwdoh Feb 19 '13 at 08:16

make a div draggable on if condition is true?

2 Answers2