Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <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 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>
      </div>
      <div id="items">
      <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>
</body>
</html>
​
 
/* Ticker */
​
$(".counter-number").each(function(i) {
    $(this).attr('id', 'num' + i);
});
​
function loadinput() {
    var newval = $("#numgo").val();
    loadticker(newval);
}
​
function loadticker(ticnum) {
    var fticnum = ticnum;
    var numheight = 18;
    addticker(fticnum);
    if (ticnum && ticnum !== 0) {
        var s = String(fticnum);
        for (i = s.length; i >= 0; i--) {
            var onum = s.charAt(i);
            $("#num" + i).attr('value', onum);
        }
        $(".counter-number").each(function() {
            var nval = $(this).attr("value");
            if (!isNaN(nval)) {
                var nheight = Number(nval) * numheight * -1;
                $(this).animate({
                    top: nheight + 'px'
                }, 1000);
            }
            if (nval == ', ') {
                $(this).animate({
                    top: '-180px'
                }, 1000);
            }
        });
    }
}
​
function addticker(newnum) {
    var digitcnt = $(".counter-number").size();
    var nnum = String(newnum).length;
    var digitdiff = Number(nnum - Number(digitcnt));
    if (digitdiff < 0) {
        var ltdig = (Number(nnum) - 1);
        $(".counter-number:gt(" + ltdig + ")").remove();
    }
    for (i = 1; i <= digitdiff; i++) {
        $(".counter-wrap").append('<div class="counter-number" id="num' + (Number(digitcnt + i - 1)) + '">&nbsp;</div>');
    }
}
​
​
/* End Ticker */
​
​
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"));
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers