Реализация равновесия(аналог весов с песком )

#javascript #html #jquery #css3 #jquery_ui

И так у нас есть терезы , к ним мы будем вешать блоки ( реализовал через draggable)
!Как сделать так чтоб , когда вешаем на терезы блок они опускались в низ, когда добавляли
вес с другой стороны , тогда они приводились в равновесия!



    $(".state").draggable();
    $('.obj_block1').draggable();
    $(".top").draggable();
   
.state {
  background-image: url(../img/Object1.png);
  background-repeat: no-repeat;
  height: 401px;
  width: 300px;
  cursor: pointer;
}

.top {
  background-image: url(93bus.png);
  background-repeat: no-repeat;
  height: 40px;
  width: 400px;
  cursor: pointer;
}

.obj_block1 {
  background-image: url(../img/block1.png);
  background-repeat: no-repeat;
  height: 70px;
  width: 70px;
  cursor: pointer;
}




  

  

  

  

  






    

Ответы

Ответ 1

$.fn.animateRotate = function(angleFrom, angleTo, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
    };
    $({ deg: angleFrom }).animate({ deg: angleTo }, args);
  });
};

$.fn.animateCircularPath = function(angleFrom, angleTo, radius, offsetX, offsetY,
duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      var rad = now * Math.PI / 180;
      $(e).css({
        top: Math.sin(rad) * radius + offsetY,
        left: (1 + Math.cos(rad)) * radius + offsetX
      });
    };
    $({ deg: angleFrom }).animate({ deg: angleTo }, args);
  });
};

var left = $()
  , right = $()
  , speed = 4000
  , currentAngle = 0
  , dropAreas = $('.drop-area')
  , dropAreaLeft = $('.drop-area-left')
  , dropAreaRight = $('.drop-area-right')
  , level = $('.level')
  , easing = 'easeOutElastic'
  , levelRadius = 80
  , halfLevelWeight = 50
  , plummetWeight = 100
  , plummetOffsetTop = parseFloat(dropAreas.css('top'))
  , plummetDistance = 10;

function animate() {
  var leftWeight = halfLevelWeight + left.length * plummetWeight
    , rightWeight = halfLevelWeight + right.length * plummetWeight
    , angle = (rightWeight - leftWeight) / (rightWeight + leftWeight) * 90;
    
  level.animateRotate(currentAngle, angle, speed, easing);
  
  var offset = plummetOffsetTop;
  left.each(function() {
    $(this).animateCircularPath(180 + currentAngle, 180 + angle, levelRadius, 0,
offset, speed, easing);
    offset += plummetDistance + plummetOffsetTop;
  });
  
  offset = plummetOffsetTop;
  right.each(function() {
    $(this).animateCircularPath(currentAngle, angle, levelRadius, 0, offset, speed,
easing);
    offset += plummetDistance + plummetOffsetTop;
  });
  
  offset = plummetOffsetTop + left.length * (plummetDistance + plummetOffsetTop);
  dropAreaLeft.animateCircularPath(180 + currentAngle, 180 + angle, levelRadius,
0, offset, speed, easing);
  
  offset = plummetOffsetTop + right.length * (plummetDistance + plummetOffsetTop);
  dropAreaRight.animateCircularPath(currentAngle, angle, levelRadius, 0, offset,
speed, easing);
  
  currentAngle = angle;
}

$('.plummet').draggable({
  revert: 'invalid',
  start: function(e, ui) {
    dropAreas.show();
  },
  stop: function(e, ui) {
    dropAreas.hide();
  }
});

dropAreas.droppable({
  drop: function(e, ui) {
    ui.draggable.css({ left: $(this).css('left'), top: $(this).css('top') }).draggable('disable');
    if ($(this).hasClass('drop-area-left')) {
      left = left.add(ui.draggable);
    }
    else {
      right = right.add(ui.draggable);
    }
    animate();
  }
});
.container {
  height: 300px;
  left: 100px;
  position: absolute;
  top: 100px;
  width: 200px;
}

.container * {
  box-sizing: border-box;
}

.base {
  border: 1px solid;
  bottom: 0;
  height: 10px;
  left: 50px;
  position: absolute;
  width: 100px;
}

.stand {
  border: 1px solid;
  height: 300px;
  position: absolute;
  left: 95px;
  top: 0;
  width: 10px;
}

.level {
  border: 1px solid;
  height: 10px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}

.drop-area {
  border: 1px dashed;
  display: none;
  height: 40px;
  position: absolute;
  top: 40px;
  width: 40px;
}

.drop-area-left {
  left: 0;
}

.drop-area-right {
  right: 0;
}

.plummet {
  border: 1px solid;
  bottom: 0;
  cursor: pointer;
  height: 40px;
  position: absolute;
  width: 40px;
}

.plummet-1 { right: 0; }
.plummet-2 { right: -50px; }
.plummet-3 { right: -100px; }
.plummet-4 { right: -150px; }

.ui-droppable-hover {
  border: 2px solid;
}

.ui-draggable-disabled {
  cursor: default;
}