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 回答