Question

我正在使用.draggable()和.droppable()根据权重和定义所有项目的每克价格的常量来计算容器中丢弃的商品的价格。

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

这就是现在的样子： jQuery draggable

这就是我希望它在页面加载时的样子： Droppable with default drop

我还没有找到任何涵盖这样的默认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>

如果我将一个项目的代码移动到可建议的droppable div，revertDraggable()和revert:将无法正常工作。

Answer 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']") }
);

这是the link to the jsfiddle。

jQuery UI Droppable默认情况下删除项目（不更改标记结构）

1 个答案: