FreeVice,
зарисовка на тему ...
перенесите слева направо блок и выберите сумму перевода
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
body{font:9pt Arial,sans-serif;}
p{color:#888; margin:8px 0 12px 0}
.wrap{position:relative; height:180px; border:1px solid white}
.draggable{margin:15px 10px; width:105px; height:105px; padding:0.5em;
border:1px solid #ddd; background-color:#eee}
.droppable{position:absolute; top:0; left:160px; width:130px; height:130px; padding:0.5em;
border:1px solid #c9c396; background-color:#eee6a3;}
</style>
</head>
<body>
<div class=wrap>
<div class="droppable" data-cash=0>
<p>0</p>
</div>
<div class="draggable" data-cash=1000>
<p>1000</p>
</div>
</div>
<div class=wrap>
<div class="droppable" data-cash=0>
<p>0</p>
</div>
<div class="draggable" data-cash=2000>
<p>2000</p>
</div>
</div>
<div id="transfer" title="transfer dialog" class="image">
<input id="sum" name="" value="0">
</div>
<script>
$(".draggable").draggable({
revert: true,
helper: "clone"
});
$(".droppable").droppable({
accept: ".draggable",
activeClass: "ui-state-hover",
drop: function(event, ui) {
var data = +ui.draggable.data("cash");
$("#sum").val(data);
var self = this;
$("#transfer").dialog("option", "buttons", {
"Перевести?": function(e) {
var val = +$("input", this).val();
data -= val;
ui.draggable.data("cash", data).find("p").html(data);
var dataSelf = +$(self).data("cash");
dataSelf += val;
$(self).data("cash", dataSelf);
$(self).addClass("ui-state-highlight").find("p").html(dataSelf);
$(this).dialog("close")
},
"Cancel": function(e) {
$(this).dialog("close")
}
});
$("#transfer").dialog("open")
}
});
$("#transfer").dialog({
autoOpen: false,
resizable: false,
modal: true
});
</script>
</body>
</html>