Jquery 在可拖放上放置后禁用可拖放

我正在做一个拖放项目，遇到了一个小问题。 我想在拖放器被放到可拖放器上后禁用它。我有一个函数，

disableDrag

，但我在控制台中得到一个错误，然后它会记录，但不执行该函数。 有人知道为什么吗？还有更好的方法吗

HTML设置：

<div class="container">

  <div id="key" class="fragment">
    <div class="key"></div>
  </div>

  <div id="dragonkey" class="fragment">
    <div class="key"></div>
  </div>

  <div id="inventory">
    <div class="slot" id="slot1"></div>
    <div class="slot" id="slot2"></div>
  </div>

</div>

这是jQuery设置：

// Javascript document

$(document).ready(function() {

  $("#key").draggable({
    containment: ".container"
  });

  $("#dragonkey").draggable({
    containment: ".container"
  });

  $("#slot1").droppable({
    accept: "#key",
    drop: dropAnimate
  });

  $("#slot2").droppable({
    accept: "#dragonkey",
    drop: dropAnimate
  });

  function dropAnimate(event, ui) {

    console.log( $(ui.draggable).attr('id'));

    var $this = $(this);

    var width = $this.width();
    var height = $this.height();
    var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
    var cntrTop = (height / 2) - (ui.draggable.height() / 2);

    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, "slow", "linear");
      }
    });
    disableDrag();
  }

  function disableDrag () {
    $(this).draggable({
      disabled: true
    });
    console.log("DISABLED");
  }


}); <!-- END OF DOCUMENT READY -->

//Javascript文档
$（文档）.ready（函数（）{
$（“#键”）.draggable({
安全壳：“.容器”
});
$（“#龙钥匙”）。可拖动({
安全壳：“.容器”
});
$（“#slot1”）。可拖放({
接受：“密钥”，
drop:dropAnimate
});
$（“#slot2”）。可拖放({
接受：“#龙钥匙”，
drop:dropAnimate
});
函数dropAnimate（事件、ui）{
log（$（ui.draggable.attr（'id'））；
var$this=$（this）；
var width=$this.width（）；
var height=$this.height（）；
var cntrLeft=（宽度/2）-（ui.draggable.width（）/2）；
var cntrTop=（height/2）-（ui.draggable.height（）/2）；
ui.draggable.position({
我的“中心”，
在“中心”，
其中：，
使用：功能（pos）{
$（这个）。动画（位置，“慢”，“线性”）；
}
});
禁用拖动（）；
}
函数禁用拖动（）{
$（此）。可拖动({
残疾人士：对
});
控制台日志（“禁用”）；
}
}); 

在您的

禁用拖动

功能中，

此

不指向正在拖动的元素；它指向窗口对象。通过使用

disableDrag（$this）将draggable元素传递给函数来修复这个问题。然后在函数
函数disableDrag（item）
中添加一个参数，并在该函数中更改
$（this）.draggable（{disabled:true}）
到
$（item）.draggable（“option”，“disabled”，true）

您可以使用
ui.draggable
元素将
禁用：true
设置为：

ui.draggable.draggable({disabled: true});

检查此示例：


//Javascript文档
$（文档）.ready（函数（）{
$（“#键”）.draggable({
安全壳：“.容器”
});
$（“#龙钥匙”）。可拖动({
安全壳：“.容器”
});
$（“#slot1”）。可拖放({
接受：“密钥”，
drop:dropAnimate
});
$（“#slot2”）。可拖放({
接受：“#龙钥匙”，
drop:dropAnimate
});
函数dropAnimate（事件、ui）{
log（$（ui.draggable.attr（'id'））；
var$this=$（this）；
var width=$this.width（）；
var height=$this.height（）；
var cntrLeft=（宽度/2）-（ui.draggable.width（）/2）；
var cntrTop=（height/2）-（ui.draggable.height（）/2）；
ui.draggable.position({
我的“中心”，
在“中心”，
其中：，
使用：功能（pos）{
$（这个）。动画（位置，“慢”，“线性”）；
}
});
ui.draggable.draggable（{disabled:true}）；
}
}); 
.container{
宽度：300px；
高度：300px；
背景色：#ccc；
}
#钥匙，#龙钥匙{
宽度：20px；
高度：20px；
位置：绝对！重要；
z指数：999；
光标：指针；
背景颜色：暗金色；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
}
#钥匙{
最高：5%；
左：5%；
}
#龙钥匙{
最高：15%；
左：5%；
}
#存货{
宽度：68px；
高度：68px；
位置：相对位置；
浮动：对；
利润率：5%5%0；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
}
.插槽{
边框：2倍实心#fff；
宽度：30px；
高度：30px；
浮动：左；
}
#slot1，#slot2{
背景色：rgba（0,0,0,1）；
}
.ui可拖放活动{
背景色：rgba（184134,11,0.7）！重要；
}
控制台中仍存在此错误。
ui.draggable.draggable({disabled: true});