使用 :lt(3) 选择器禁用每个元素的可拖动

Question

我有以下工作代码：

$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
  });

此代码将几个 类 添加到 3 个 div，但 css 除外。每个 div 得到一个不同的左边 属性 使用：

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

一切正常，但我还想禁用前 2 个 div 的可拖动选项。

我试过 (1):

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

和 (2)

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

但是 try (1) 禁用了所有 3 个 div，而不仅仅是前 2 个并且 try (2) 根本不起作用。

我怎样才能做到这一点？

非常感谢

Answer 1

可拖动小部件的 disabled 属性 是使用 option 方法设置的，此 属性 需要一个布尔值，另一方面 css jQuery 方法接受一个函数作为第二个参数，但是 disable 方法或禁用 属性 没有。最好的方法是使用 each 方法迭代每个项目：

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

jsfiddle