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

И так у нас есть терезы , к ним мы будем вешать блоки ( реализовал через 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; }

Ответ

$.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; }