Question

几天前，我在http://www.smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui发现了这篇有趣的帖子，并将其应用到我的网站上。然而，当我逐渐使用它时，我发现了一个错误，基本上你不能将一个项目直接从一个div移动到另一个底部，它必须通过上面的部分并进入底部。任何人都可以建议它出错的地方？该示例位于http://www.smartjava.org/examples/dnd/double.html

困扰我好几天.....

Answer 1

我做的有点不同了。而不是在指令的控制器中附加一个jquery ui元素，而是在指令的link函数中做到了。我提出了我的解决方案，基于Ben Farrell的blog post。

请注意，这是一个Rails应用，我使用acts_as_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，卡片和位置，以便jQuery sortable小部件可以抓取。
调用stop事件后，我立即执行scope.$apply函数重新进入，Misko Hevery称之为angular execution context。
我有一个实际的例子，在我的GitHub Repo中。

使用Angular JS和JQuery进行拖放

1 个答案:

要点