Вопрос по Draggable
Есть два списка элементов - справа и слева. Первый - источник денег, наличные или карта, второй - статьи расходов, например продукты и развлечения.
Нужно чтобы элементы оставались на местах, но при этом из первого можно было бы взять и потянуть его копию на один из элементов второго списка. Потом всплывашка уже будет запрашивать сумму. Как это можно сделать? Думал еще про функцию Sortable, там есть connect lists, но не знаю как дотюнить. Есть наверное еще более подходящий пример с shopping cart, только непонятно как две корзины сделать. Как-то не могу докрутить образец http://jsfiddle.net/ateregulov/LLcocd83/24/ |
FreeVice,
зарисовка на тему ... :write: перенесите слева направо блок и выберите сумму перевода
<!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>
|
круто, спасибо! а сколько на это времени ушло?
|
FreeVice,
всё относительно :) несколько минут чтобы скомпоновать прежние наработки или несколько лет чтобы эти наработки были или взять разницу между вашим и моим сообщением |
Не jQuery единой!
<ul id="money">
<li>Наличные</li>
<li>Карта</li>
</ul>
<ul id="goods">
<li>Пирожок</li>
<li>Кино</li>
</ul>
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<script>
var source = new Sortable(money, {
group: {pull: 'clone', put: false, name: 'spend'},
sort: false
});
var target = new Sortable(goods, {
group: {pull: false, put: true, name: 'spend'},
sort: false,
onAdd: function() {
prompt('Введите сумму', '');
}
});
</script>
|
danik.js,
спасибо за информацию - но зачем Sortable нужно было ТС я так и не понял |
Цитата:
|
| Часовой пояс GMT +3, время: 20:41. |