Question

While at IE this works in chrome it wont: “Snap” Option in draggable stop working while pressing “Ctrl”, i cant even seem to get the alert(“SNAP”) when pressing ctrl while dragging. my tries are:

 $("#object").draggable({
        handle: '#handle_',
        containment: '#MainBody',
        snap: ".drag_alignLines", // Setting snap to alignment lines
        snapTolerance: 15
                            }).bind('keydown', function(event){ 
                        alert("SNAP");
                    if(event.ctrlKey)
                    {
                        alert("hi");
                        this.draggable( "option", "snap", false );
                    }
                });

cant get Chrome to catch the ctrl key while dragging…
and even in IE the: “this.draggable( “option”, “snap”, false );” just dont make it stop snap while dragging…

Answer 1

What you want to do is reset the snap option like so:

$( "#object" ).draggable( "option", "snap", false );

And remember to set it back to the original value on a regular click. Here is the relevant section of this jsfiddle:

$("#object").draggable({
containment: '#MainBody',
snapTolerance: 15,
start: function(event)
    {
        if(event.ctrlKey)
        {
            $(this).draggable("option", "snap", false);
        }else {
            $(this).draggable("option", "snap", '.drag_alignLines');
        }

    }});

It binds to ‘start’ rather than on ‘keydown’ so you don’t have to aim before hitting Control.