javascript - 拖动项目时更改变量的值AngularJS JQuery-UI

Question

我有三个 div:

<div class="col-sm-4">
  countries and cities
  <ul class="source">
    <li data-value="country">USA</li>
    <li data-value="country">France</li>
    <li class="city" data-value="city">Paris</li>
    <li data-value="city">Rome</li>
  </ul>
</div>


<div id="divCountries" class="col-sm-4">
  Countries
  <ul id="countries">
  </ul>
</div>


<div id="divCities" class="col-sm-4">
  Cities
  <ul id="cities">
    <li class="city" data-value="city">London</li>
  </ul>
</div>

当我将其中一个城市拖到 id="divCities"的 div 时，我希望一个变量变为真。

这里你有一个 plunker，它有点接近我想要的。

https://plnkr.co/edit/XOVRgqxOyVNPnKawQ8pA?p=preview

如果我在 id="divCities"的 div 中添加先验的 2 个城市，变量将为 true，然后答案将是正确的。但如果我有一个并将第二个拖到那里，它就不会变为真。

就像plunker现在一样，你可以看到#divCities中有一个class="city"的城市。当我将具有 class="city"的 Paris 拖到 id="divCities"的 div 中时，具有 class="city"的元素的数量应该为 2，并且以下变量应该变为 true。

   $scope.exercise = $('#divCities .city').length === 2;

然后如果它是真的，它应该激活一个 ng-show 并显示“正确”。

我错过了什么？有什么帮助吗？

谢谢你:)

Answer 1

在您的代码中只需添加一个拖动事件，该事件会在拖动时触发，在该事件处理程序中将您的变量更改为 true

这是代码

$(".source li").draggable({
  helper: "clone",
  drag:function(){
    console.log('do things here which works on drag');
  }
});