0

非常に複雑なショッピング カートに、単純なドラッグ アンド ドロップの基盤を用意しようとしています。jQuery UI を使用したことがないため、主な概念を示すプロトタイプを作成しました。

つまり、カートには、ドラッグ可能なアセットをいくつでも含めることができるコンテナがいくつかあります。それはdiv内のdivです。アセットは、任意のコンテナーにドロップできるようにする必要があります。最初のインタラクションは機能していますが、アセットを別のコンテナーにドロップした後、同じアセットをドラッグして戻すか、別のコンテナーにドラッグしようとすると、ドロップは機能しますが、ドラッグはカーソルに追従しません。

ここにコードを投稿しました：http://jsfiddle.net/VjWx2/

ここに私のJavaScriptがあります:

var cartDragger, move;

cartDragger = (function() {

  function cartDragger(el, contain) {
    this.el = el;
    this.contain = contain;
  }

  cartDragger.prototype.drag = function() {
    return $(this.el).draggable({
      revert: 'invalid',
      start: function() {
        this.currentParent = $(this).parent().attr('id');
        return $(this).addClass('highlighted');
      }
    });
  };

  cartDragger.prototype.drop = function() {
    return $(this.contain).droppable({
      accept: this.el,
      over: function() {
        return $(this).removeClass('out').addClass('over');
      },
      out: function() {
        return $(this).removeClass('over').addClass('out');
      },
      drop: function(event, ui) {
        $(this).removeClass('over');
        ui.draggable.removeClass('highlighted');
        if (this.currentParent !== $(this).attr('id')) {
          return ui.draggable.appendTo($(this)).removeAttr('style');
        }
      }
    });
  };

  return cartDragger;

})();

move = new cartDragger('.asset', '.project');
move.drag();
move.drop();
4

1 に答える 1

1

一部の移動後にヘルパーが存在しない理由はわかりませんが、次のようなクローン ヘルパーを作成する回避策を使用できます: http://jsfiddle.net/VjWx2/1/

  cartDragger.prototype.drag = function() {
    return $(this.el).draggable({
      revert: 'invalid',
      helper:function() {
        return $(this).clone();
      },
      opacity : '0.6',
      start: function() {
        this.currentParent = $(this).parent().attr('id');
        return $(this).addClass('highlighted');
      }
    });
  };
于 2013-03-15T06:37:35.023 に答える