4

I want to be able to change the parameters that are being passed into the selectable's start event, so I can basically allow my user to use the selectable jQuery UI effect without having to hold down the CTRL key.

JS

$(function() {
$( "#selectable" ).bind("mousedown", function(event, ui) {
    var result = $( "#select-result" ).empty();
    event.metaKey = event.ctrlKey = true;
});
$( "#selectable" ).selectable();
});

I have a fiddle with what I'm trying to accomplish here:

http://jsfiddle.net/josephbulger/ZfevM/

The problem I'm having, is that when i set the event's parameters in the start method, the stop method is not seeing the changes I'm making.

Is there a way to accomplish what I'm trying to do?

T J
  • 42,762
  • 13
  • 83
  • 138
Joseph
  • 25,330
  • 8
  • 76
  • 125

3 Answers3

15

You can't set the properties here no...because it's a different event object in the stop method. You can set some variables at a higher scope (like this), but none that will persist on the event object. It's not that it's "clearing" them really, it's just a brand spanking new object.

To make the selectable behave as if Ctrl is held down, bind to the mousedown event it uses ahead of time and set the .metaKey property on that event to true, like this:

$("#selectable").bind("mousedown", function(e) {
    e.metaKey = true;
}).selectable();

You can test it out here, remember to find before calling .selectable(), since event handlers are executed in the order bound.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • @Nick so where is the higher scope that I need to tell the jQuery object to always use CTRL when a the user clicks on an item? – Joseph Nov 18 '10 at 13:45
  • @Joseph - I added an example of this, just some variables in the scope that's the common parent, for example in the `document.ready` like you have...or even as `.data()` properties on the selectable container...wherever you want to put them really. – Nick Craver Nov 18 '10 at 13:47
  • @Nick I see what you did, but that isn't causing the jQuery Selectable effect to use those values. What I want it to do is to have the jQuery selectable object to actually "think" the user was holding down the CTRL key. Is that possible? – Joseph Nov 18 '10 at 13:51
  • 1
    @Joseph - Ah, that's a different question :) Yes you can bind the `mousedown` event ahead of time, like this: http://jsfiddle.net/nick_craver/ZfevM/3/ Is that what you're after? – Nick Craver Nov 18 '10 at 13:55
  • @Nick Perfect!! Can you add that fiddle to your answer so others can see what the solution was? – Joseph Nov 18 '10 at 13:57
5

I've updated the code. Have a look at this URL.

http://jsfiddle.net/phoenix_suresh/7f6j5/

Meanwhile, I've added ID attribute to

  • items so that you can have more control on it.
    • phoenix_suresh
    • 51
    • 1
    • 1
    4

    After finding this answer I noticed that you can use the originalEvent property on the event object returned in the selectable start event handler to set the ctrlKey property to true.

    Like so:

    $("#selectable").selectable({
    start: function (event, ui) {
        event.originalEvent.ctrlKey = true;
    }
});

    Working fiddle

    Luke Pfeiffer
    • 316
    • 2
    • 3