0

数日前、 http://www.smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui でこの興味深い投稿を見つけて
、それを自分の Web サイトに適用しました。ただし、徐々に使用すると、特定されたバグがあります。基本的に、アイテムをある div から別の div の下部に直接移動することはできません。上の部分を通過して下部に進む必要があります。どこが間違っているのか誰でも提案できますか？例はhttp://www.smartjava.org/examples/dnd/double.htmlにあります

もう何日もお邪魔します.....

4

1 に答える 1

0

私はこれを少し違った方法で行いました。ディレクティブのコントローラー内に jquery ui 要素をアタッチする代わりに、ディレクティブのリンク関数内でそれを行いました。Ben Farrellのブログ投稿に基づいて、解決策を思いつきました。

これはRailsアプリであり、acts_as_listgem を使用してポジショニングを計算していることに注意してください。

 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に、これを実際に動かしている例があります。
于 2013-07-17T03:26:56.163 に答える