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

Posted 2023-05-09

【中文标题】拖动项目AngularJS JQuery-UI时更改变量中的值

【英文标题】：Change value in variable when dragging an item AngularJS JQuery-UI

【发布时间】：2018-02-18 19:06:50

【问题描述】：

我有三个 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 中时，我希望变量变为 true。

你有一个和我想要的很接近的 plunker。

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

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

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

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

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

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

谢谢你:)

【问题讨论】：

使用拖动事件api.jqueryui.com/draggable/#event-drag

【参考方案1】：

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

这里是代码

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

【讨论】：

非常感谢您的帮助 :) 我还想出了另一个解决方案。我移动了 $scope.exercise = $('#divCities .city').length === 2;在函数内部，因此仅在用户单击按钮时才计数