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

时间:2017-09-10 11:59:38

标签: javascript jquery angularjs jquery-ui

我有三个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。

在这里你有一个接近我想要的接收器。

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

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

正如现在的掠夺者,你可以看到#divCities里面有一个class =“city”的城市。 当我将具有class =“city”的Paris拖到id =“divCities”的div中时,class =“city”的元素数应该为2,并且以下变量应该变为true。

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

然后如果是,它应该激活ng-show并显示“正确”。

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

谢谢:)

1 个答案:

答案 0 :(得分:1)

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

这是代码

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