1

我正在使用.draggable()and.droppable()来计算丢弃在容器中的物品的价格，基于重量和定义所有物品每克价格的常数。

现在，我希望默认情况下将其中一个项目放入容器中，以及正确的计算以及在容器上拖动更多/更少项目的可能性。当按下重置按钮时，定位应该像图 1 一样，并且我必须能够像其他可拖动项一样将默认项拖出容器。

这就是它现在的样子： jQuery可拖动

这就是我希望它在页面加载时的样子： 可丢弃，默认丢弃

我还没有找到任何涵盖此类默认 droppable 的文档，所以我真的不知道从哪里开始。我在这里为那些更喜欢它的人准备了一个 Jsfiddle：http: //jsfiddle.net/gPFMk/和一个 Jsbin http://jsbin.com/oxuguc/1/edit

var price = 0, math = '', items = [], state = 'outside', wprice = 209;


function calcPrice(math) {
  price = 0;
  weight = 0;
  $('.counter-number').remove();
  addticker(0);
  console.log("Item array: " + items);
  $.each( items, function( key, value ) {
    price+= parseInt($(".draggable[data-item='" + value + "']").attr('id'));
    weight+= $(".draggable[data-item='" + value + "']").data('weight');
    loadticker(price);
  });
  $('#weight').html('<span>weight </span>' + weight + ' g');
}

function revertDraggable($selector) {
  $selector.each(function() {
    var $this = $(this),
      position = $this.data("originalPosition");
      if (position) {
        $this.animate({
          left: position.left,
          top: position.top
        }, 500, function() {
          $this.data("originalPosition", null);
        });
      }
    items = [];
    $('#droppable').removeClass('active');
    $('.counter-number').remove();
    calcPrice();
  });
}

$(function() {
  $.each($('.draggable'), function() {
    var $this = $(this),
    weight = $this.data('weight');
    $this.attr('id', weight*wprice);
  });

  $(".draggable").draggable({
    revert: function (event, ui) {
      $(this).data("draggable").originalPosition = {
        top: 0,
        left: 0
      };
      return !event;
    },
    cursor: "move",
    cursorAt: {
      top: 56,
      left: 56
    },
    stack: "div",
    containment: "#container",
    scroll: false
  });

  $("#droppable").droppable({
    drop: function(e, u) {
      $(this).addClass('active');
      if ($.inArray(u.draggable.data('item'), items) == -1) {
        items.push(u.draggable.data('item'));
        price = 0;
        weight = 0;
        calcPrice('add');
        u.draggable.data('state', 'inside');
      }
      if (!u.draggable.data("originalPosition")) {
        u.draggable.data("originalPosition",
        u.draggable.data("draggable").originalPosition);
      }
    },
    over: function() {
      $(this).addClass('active');
    },
    out: function(e, u) {
      if(u.draggable.data('state') == 'inside') {
        u.draggable.data('state', 'outside');
        var itemIndex = $.inArray(u.draggable.data('item'), items);
        items.splice(itemIndex, 1);
        price = $("#droppable").text();
        calcPrice('remove');
      }
      if (items.length === 0)
        $('#droppable').removeClass('active');
    }
  });
  $('#container').on('click', '#reset', function() {
    revertDraggable($(".draggable"));
  });
});

 

  <div id="container">
    <div id="heft">
      <div id="info">
          <div id="price">
            <span>price</span>
            <div class="counter-wrap">
              <div class="counter-number">
                  &nbsp;
              </div>
            </div>€
          </div>
          <div id="weight">
            <span>weight</span>
            0 g
          </div>
          <button id="reset">Reset</button>
        </div>
        <div id="droppable"></div>
      </div>
      <div id="items">
      <div class="draggable" data-item="3" data-weight="15" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div>
      <div class="draggable" data-item="2" data-weight="35" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div>
      <div class="draggable" data-item="1" data-weight="8" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div>
      </div>
    </div>

如果我像建议的那样将一项的代码移动到可放置的 div 中，revertDraggable()并且revert:不会按预期工作。

4

1 回答 1

1

这是一个模拟文档加载时第一个项目的项目下降的解决方案。困难在于模仿下降过程中发生的情况：

$(".draggable[data-item='1']").attr(
    "style",
    "position: relative; z-index: 10; left: 300px; top: 30px"
);

var onDrop = function(e,u) {
    if ($.inArray(u.draggable.data('item'), items) == -1) {
        items.push(u.draggable.data('item'));
        price = 0;
        weight = 0;
        calcPrice('add');
        u.draggable.data('state', 'inside');
    }
    if (!u.draggable.data("originalPosition")) {
        u.draggable.data("originalPosition",
        u.draggable.data("draggable").originalPosition);
    }
};

onDrop.call($("#droppable"),
    {},{ draggable: $(".draggable[data-item='1']") }
);

这是jsfiddle 的链接。

于 2013-02-20T13:31:02.873 回答