javascript - YUIドラッグアンドドロップで2つのリストを作成し、新しいリストをファイルに保存します

Question

私がやりたいのは、ドラッグ可能で並べ替え可能な2つのリストを用意して、それらを並べ替えた後、[保存]または[送信]をクリックして、新しいリストを別のファイルに保存できるようにすることです。私はYUIとPHPの初心者ですが、問題を抱えているのは、これらのリストを新しい属性（クラスが「list1」から「list2」に変更）でエクスポートする方法を理解しようとしていることです。

YUIブログのテンプレートを使用していますが、情報が正確に提供されているわけではありません。

サンプルの関連コードは次のとおりです（私が行っているのは、基本的にテンプレートからいくつかの名前を変更することだけです）。

<div id="play">
<ul id="list1">
    <li class="list1">Item #1</li>
    <li class="list1">Item #2</li>
    <li class="list1">Item #3</li>
    <li class="list1">Item #4</li>
    <li class="list1">Item #5</li>
</ul>
<ul id="list2">
    <li class="list2">Item #1</li>
    <li class="list2">Item #2</li>
    <li class="list2">Item #3</li>
    <li class="list2">Item #4</li>
    <li class="list2">Item #5</li>
</ul>
</div>

<script type="text/javascript">
YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
//Listen for all drop:over events
Y.DD.DDM.on('drop:over', function(e) {
    //Get a reference to our drag and drop nodes
    var drag = e.drag.get('node'),
        drop = e.drop.get('node');

    //Are we dropping on a li node?
    if (drop.get('tagName').toLowerCase() === 'li') {
        //Are we not going up?
        if (!goingUp) {
            drop = drop.get('nextSibling');
        }
        //Add the node to this list
        e.drop.get('node').get('parentNode').insertBefore(drag, drop);
        //Resize this nodes shim, so we can drop on it later.
        e.drop.sizeShim();
    }
});
//Listen for all drag:drag events
Y.DD.DDM.on('drag:drag', function(e) {
    //Get the last y point
    var y = e.target.lastXY[1];
    //is it greater than the lastY var?
    if (y < lastY) {
        //We are going up
        goingUp = true;
    } else {
        //We are going down.
        goingUp = false;
    }
    //Cache for next check
    lastY = y;
});
//Listen for all drag:start events
Y.DD.DDM.on('drag:start', function(e) {
    //Get our drag object
    var drag = e.target;
    //Set some styles here
    drag.get('node').setStyle('opacity', '.25');
    drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
    drag.get('dragNode').setStyles({
        opacity: '.5',
        borderColor: drag.get('node').getStyle('borderColor'),
        backgroundColor: drag.get('node').getStyle('backgroundColor')
    });
});
//Listen for a drag:end events
Y.DD.DDM.on('drag:end', function(e) {
    var drag = e.target;
    //Put our styles back
    drag.get('node').setStyles({
        visibility: '',
        opacity: '1'
    });
});
//Listen for all drag:drophit events
Y.DD.DDM.on('drag:drophit', function(e) {
    var drop = e.drop.get('node'),
        drag = e.drag.get('node');

    //if we are not on an li, we must have been dropped on a ul
    if (drop.get('tagName').toLowerCase() !== 'li') {
        if (!drop.contains(drag)) {
            drop.appendChild(drag);
        }
    }
});

//Static Vars
var goingUp = false, lastY = 0;

//Get the list of li's in the lists and make them draggable
var lis = Y.Node.all('#play ul li');
lis.each(function(v, k) {
    var dd = new Y.DD.Drag({
        node: v,
        target: {
            padding: '0 0 0 20'
        }
    }).plug(Y.Plugin.DDProxy, {
        moveOnEnd: false
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#play'
    });
});

//Create simple targets for the 2 lists.
var uls = Y.Node.all('#play ul');
uls.each(function(v, k) {
    var tar = new Y.DD.Drop({
        node: v
    });
});

});