scriptaculous перетаскивание обекта и разбивка дива на зоны
Короче я пишу на пхп, но жизнь заставляет и js учить. Столкнулся с такой задачей и не знаю как ее решить. Пишу онлайн форму для отправки состава футбольной команды. И решил тут немного приукрасить и упростить задачу для юзеров, сделав все визуально. Пока не дорисовывал обработку и т.п. Вывожу слева список игроков и перетаскиваю их на право, где хотел бы сделать не просто список (это и так получилось), а вид поля и разметкой по позициям. Так вот главная проблема, как разбить div на зоны и чтоб в каждой зоне можно было поставить только одного игрока?
Код:
function build($id){
$con="<h3 align=center>Состав на игру</h3>
<div class=sostav>
<div id=\"squard\">";
foreach ($this->m['db']->query("select * from players where team='$id' order by pos") as $r){
$con.="<div id=\"squard_".$r['id']."\">".$r['name']."</div>";
}
$con.="</div>
<div id=match>
</div>
</div>";
$con.="
<script type=\"text/javascript\">
// <![CDATA[
Sortable.create(\"squard\",
{dropOnEmpty:true,tag:'div', revert: true,containment:[\"squard\",\"match\"],constraint:false,
onChange:function(){\$('squard_debug').innerHTML = Sortable.serialize('squard') }});
Sortable.create(\"match\",
{dropOnEmpty:true,tag:'div',handle:'handle',containment:[\"squard\",\"match\"],constraint:false,
onChange:function(){\$('match_debug').innerHTML = Sortable.serialize('match') }});
// ]]>
</script>
";
$this->pm_show($con);
}
$con="<h3 align=center>Состав на игру</h3>
<div class=sostav>
<div id=\"squard\">";
foreach ($this->m['db']->query("select * from players where team='$id' order by pos") as $r){
$con.="<div id=\"squard_".$r['id']."\">".$r['name']."</div>";
}
$con.="</div>
<div id=match>
</div>
</div>";
$con.="
<script type=\"text/javascript\">
// <![CDATA[
Sortable.create(\"squard\",
{dropOnEmpty:true,tag:'div', revert: true,containment:[\"squard\",\"match\"],constraint:false,
onChange:function(){\$('squard_debug').innerHTML = Sortable.serialize('squard') }});
Sortable.create(\"match\",
{dropOnEmpty:true,tag:'div',handle:'handle',containment:[\"squard\",\"match\"],constraint:false,
onChange:function(){\$('match_debug').innerHTML = Sortable.serialize('match') }});
// ]]>
</script>
";
$this->pm_show($con);
}
Мне думается что надо просто внутри одного дива (поле игровое) разместить 11 дивов (места для игроков) и отпозиционировать их относительно первого дива. Честно говоря не вижу особой проблемы в этом
