Jquery ui 使用Angular JS和JQuery拖放

几天前，我在
上找到了这篇有趣的文章，并将其应用到我的网站上。然而，当我逐步使用它时，我发现了一个bug，基本上你不能将一个项目直接从一个div移动到另一个div的底部，它必须通过上面的部分，然后移动到底部。任何人都可以提出哪里出了问题？例如：

---

已经困扰了我好几天了….

我的做法有点不同。我没有在指令的控制器中附加jqueryui元素，而是在指令的link函数中附加。我根据本·法雷尔（Ben Farrell）的一篇文章提出了我的解决方案

请注意，这是一个

Rails

app，我使用

acts\u as\u list

gem来计算定位

 app.directive('sortable', function() {
  return {
    restrict: 'A',
    link: function(scope, elt, attrs) {

      // the card that will be moved
      scope.movedCard = {};
      return elt.sortable({
        connectWith: ".deck",
        revert: true,
        items: '.card',
        stop: function(evt, ui) {
          return scope.$apply(function() {

            // the deck the card is being moved to
            // deck-id is an element attribute I defined
            scope.movedCard.toDeck = parseInt(ui.item[0].parentElement.attributes['deck-id'].value);

            // the id of the card being moved
            // the card id is an attribute I definied
            scope.movedCard.id = parseInt(ui.item[0].attributes['card-id'].value);

            // edge case that handles a card being added to the end of the list
            if (ui.item[0].nextElementSibling !== null) {
              scope.movedCard.pos = parseInt(ui.item[0].nextElementSibling.attributes['card-pos'].value - 1);
            } else {
              // the card is being added to the very end of the list
              scope.movedCard.pos = parseInt(ui.item[0].previousElementSibling.attributes['card-pos'].value + 1);
            }

            // broadcast to child scopes the movedCard event
            return scope.$broadcast('movedCardEvent', scope.movedCard);
          });
        }
      });
    }
  };
});

要点

• 我利用卡片属性来存储卡片的id、卡片组和位置，以便允许

  jquerysortable

  小部件抓取
• 调用

  stop

  事件后，我立即执行

  范围。$apply

  函数返回Misko Hevery调用的

  角度执行上下文

• 我有一个实际的例子，在我的一个例子中

---

哦，等了这么久，甚至没人看。。。。。