Disable draggable for each element using :lt(3) Selector

Question

I have the following working code:

$stock.click(function () {
    $waste.append($stock.children('.container:lt(3)').card('upturn').droppable('disable').css( "left", function(i) {return ["0rem", "2rem", "4rem"][i];}) ); //3 divs
  });

This code adds several classes to 3 div's, except the for the css. Each div gets a different left property using:

.css( "left", function(i) {return ["0rem", "2rem", "4rem"][i];})

This all works, but I also want to disable the draggable option for the first 2 div's.

I've tried things like (1):

.draggable('disable', function(i) {return ["true", "true", "false"][i];})

and (2)

.draggable(function(i) {return ['disable', 'disable', 'enable'][i];})

but try (1) disables all the 3 divs, not just the first 2 and try (2) doesn't work at all.

How can I achieve this?

Thanks a lot

Answer 1

The disabled property of draggable widget is set with the option method and this property expects a Boolean, by other hand the css jQuery method accepts a function as a second parameter but the disable method or the disabled property not. The best approach is to use the each method to iterate on each item:

.each(function(i){ $(this).draggable("option", "disabled", [false, true, true, false][i]) });

jsfiddle