Scriptaculous

[a_n_d_y]

Короче я пишу на пхп, но жизнь заставляет и 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);
    }