how can i remove draggable event for div?

I want to add new .point to container , then draggablge it, but firstly I want to unbind all draggable events for $('.piont'), how to do it ?

<script type="text/javascript" src=".4.2/jquery.min.js"></script>
<script type="text/javascript" src=".8.2/jquery-ui.js"></script>
<style type="text/css">
    *{margin:0;padding:0}
    .container{
        margin:50px;
        width:100px;
        height:100px;
        border:1px solid #777;
        position:relative
    }
    .point{
        width:20px;
        height:20px;
        background-color:tan;
        position:absolute;
    }
</style>
<script type="text/javascript">
    $(function(){
        $('.point').draggable({
            stop: function (e){
                alert(1);
            }
        }); 
    });

    function unbind_draggable(){
        // how can unbind draggable for .point?
    }
</script>
<div class="container">
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
</div>
<button onclick="unbind_draggable()">unbind_draggable</button>

how can i remove draggable event for div?

I want to add new .point to container , then draggablge it, but firstly I want to unbind all draggable events for $('.piont'), how to do it ?

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery./ui/1.8.2/jquery-ui.js"></script>
<style type="text/css">
    *{margin:0;padding:0}
    .container{
        margin:50px;
        width:100px;
        height:100px;
        border:1px solid #777;
        position:relative
    }
    .point{
        width:20px;
        height:20px;
        background-color:tan;
        position:absolute;
    }
</style>
<script type="text/javascript">
    $(function(){
        $('.point').draggable({
            stop: function (e){
                alert(1);
            }
        }); 
    });

    function unbind_draggable(){
        // how can unbind draggable for .point?
    }
</script>
<div class="container">
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
</div>
<button onclick="unbind_draggable()">unbind_draggable</button>

• javascript
• jquery
• jquery-ui

4 Answers 4

For removing draggable event :

 $( ".selector" ).draggable( 'disable' ); OR
 $( ".selector" ).draggable( 'destroy' );

Further details check jQuery UI API documentation. Click here

For your question:

function unbind_draggable(){
     $('point').draggable( 'destroy' );
     //OR
     $('point').draggable( 'disable' );
}

To remove draggable from all .points, use:

function unbind_draggable(){
    $(".points").draggable("destroy");
}

That will remove all draggable functionality, not just disable it.

See the jQuery UI API.

Although just disabling will work, I don't remend it as it will not clear the RAM that the jQuery draggable is occupying.

Try this out:- http://jsfiddle/adiioo7/chyhf/

JS:-

$(function () {
    $('.point').draggable({
        stop: function (e) {
            alert(1);
        }
    });
});

function unbind_draggable() {
    $('.point').draggable("destroy");
}

 $('.point').droppable('disable');