Working Mootools Drag-Drop and Sort after drop. Need ID replace after sort to track input order

Question

Description: Drag and drop form elements to build a form that will be displayed later.

Needed: - input and textarea formfields need to have id's in order after they have been sorted. I need to reference the answer to the questions and the instructions. Right now if they are sorted, I would not know what order to display them in later when viewing the record. there may be a better way, but Im stuck now.

• Sort issue: The sortable area does not work until after the drag drop event. There are default fields that need to be sorted right away.

Here is the fiddle: http://jsfiddle.net/htscraig/vhkGD/3/

<div class="vf">
    <div id="edit_menu">
        <p style="text-align: center; margin: -5px 5px 5px;">Form Elements Menu</p>
        <button href="#" id="questions_toggle" style="margin-left: 9px;">Questions<span id="questions_status"> show</span>

        </button>
        <button id="answers_toggle" href="#">Answer Type<span id="answers_status"> show</span>

        </button>
        <button id="instructions_toggle" href="#">Instructions<span id="instructions_status"> show</span>

        </button>
        <div id="questions">
            <div style="text-align: center;">
                <h3>VF-300 Questions<h3></div>
    <div class="item">
        <li style="float:left, height:40px, width:200px">
            <textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
        </li>
        <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item">
        <li style="float:left, height:40px, width:200px">
            <textarea class="mooeditable" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
        </li>
        <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item">
            <textarea class="mooeditable" cols="43" rows="6" style="border: medium none; width: 240px;" name="vf300-Q3" form="GeneralVerdict">[or] 

[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
        <span class="delete"><button>Delete Line</button></span>
    </div>

    <hr>
</div>

<div id="answers">
    <div style="text-align: center;"><h3>VF-300 Answer Formats<h3></div>
    <div class="item">
    <input type="radio" value="Yes" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
    <input type="radio" value="No" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
 <span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>

    </div>
    <div class="item"><span>Answer 222222</span>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><span>Answer 333333</span>
 <span class="delete"><button>Delete Line</button></span>

    </div><hr>
</div>

<div id="instructions">
    <div style="text-align: center;"><h3>Juror Instructions<h3></div>
    <div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><textarea class="" cols="43" rows="4" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i3" form="GeneralVerdict">If your answer to question 3 is yes, then answer question 4. If you answered no, stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i4" form="GeneralVerdict">If your answer to [either option for] question 4 is yes, then answer question 5. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.</textarea>
 <span class="delete"><button>Delete Line</button></span>

    </div><hr>
</div>



</div>

<div id="edit_right">
<div class="info"><h1>CoPO Verdict Builder</h1>Drag and drop form elements in box. Drag elements into position to sort</div>

<ol>
<div id="edit_area">

    <div class="item_dz" id="1">
        <li style="float:left, height:40px, width:200px">
            <textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
        </li>
        <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item_dz">
    <input type="radio" value="Yes" name="yes-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
    <input type="radio" value="No" name="no-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
 <span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
    </div>

    <div class="item_dz">
        <li style="float:left, height:40px, width:200px">
            <textarea class="" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
        </li>
        <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item_dz">
    <input type="radio" value="Yes" name="yes-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
    <input type="radio" value="No" name="no-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
 <span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
    </div>    

    <div class="item_dz">
            <textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or] 

[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
        <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item_dz">
    <input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
    <input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
 <span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
    </div>    

    <div class="item_dz"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
 <span class="delete"><button>Delete Line</button></span>
    </div>

</div>

</div>
</ol>
</div>



window.addEvent('domready', function () {

    $$('.item').addEvent('mousedown', function (event) {
        if (event.target == this.getParent().getElement('.delete button')) return;
        event.stop();

        // `this` refers to the element with the .item class
        var item = this;

        var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
            opacity: 0.7,
            position: 'absolute'
        }).inject(document.body);

        var drag = new Drag.Move(clone, {

            droppables: $('edit_area'),

            onDrop: function (element, droppable) {

                if (!droppable) {
                    item.removeClass('item_dz');
                    item.addClass('item');
                    item.tween('background-color', '#c0c0c0', '#fff');

                } else {
                    item.removeClass('item');
                    item.addClass('item_dz');
                    item.clone().inject(edit_area);
                    edit_area.highlight('#4679BD', '#AFD2FF');
                    item.removeClass('item_dz');
                    item.addClass('item');

                    var mySortables = new Sortables('', {
                        clone: true,
                        opacity: 0.4,
                    });

                    setTimeout(function () {
                        mySortables.addLists(edit_area);
                    }, 1);
                }

                element.dispose();

            },



            onEnter: function (dragging, edit_area) {
                edit_area.tween('background-color', '#9FFF8F');
            },
            onLeave: function (dragging, edit_area) {
                edit_area.tween('background-color', '#fff');
            },
            onCancel: function (dragging) {
                dragging.destroy();
                edit_area.tween('background-color', '#fff');
            }
        });
        drag.start(event);
    });



    $$('.delete').addEvents({
        mouseover: function () {
            this.tween('opacity', '1');
            this.getParent(['.item_dz']).fade(0.3);
            this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
        },
        mouseleave: function () {
            this.tween('opacity', '0.7');
            this.getParent(['.item_dz']).fade(1);
            this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
        }
    });

    // start delegation relays
    window.addEvent('click:relay(.delete)', function () {
        if (confirm('Delete this line item?')) {
            this.getParent(['.item_dz']).destroy();
            this.destroy();
        } else {
            // Do nothing
        }
    })

    window.addEvent('mouseover:relay(.delete)', function () {
        this.tween('opacity', '1');
        this.getParent(['.item_dz']).fade(0.3);
        this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
    })

    window.addEvent('mouseleave:relay(.delete)', function () {
        this.tween('opacity', '0.7');
        this.getParent(['.item_dz']).fade(1);
        this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
    })
    //end delegation relays


    // menu toggle menus start
    var status = {
        'true': ' show',
            'false': ' hide'
    };

    // questions slide start

    var questionsSlide = new Fx.Slide('questions');
    // set default slide as hidden
    questionsSlide.hide();

    $('questions_toggle').addEvent('click', function (event) {
        event.stop();
        questionsSlide.toggle();
        $('questions_status').set('text', status[questionsSlide.open]);
    });

    // questions slide end

    // answers slide start
    var answersSlide = new Fx.Slide('answers');
    // set default slide as hidden
    answersSlide.hide();

    $('answers_toggle').addEvent('click', function (event) {
        event.stop();
        answersSlide.toggle();
        $('answers_status').set('text', status[answersSlide.open]);
    });
    // answers slide end

    // instructions slide start
    var instructionsSlide = new Fx.Slide('instructions');
    // set default slide as hidden
    instructionsSlide.hide();

    $('instructions_toggle').addEvent('click', function (event) {
        event.stop();
        instructionsSlide.toggle();
        $('instructions_status').set('text', status[instructionsSlide.open]);
    });
    // instructions slide end
    // menu toggle menus end

    $('textarea').mooEditable();

});

Answer 1

The sortables is only added after the first drop event. To have the .item_dz sortable from the beggining you can add this line directly after the domeready function opening: http://jsfiddle.net/ke7nq/

 var sortableItem_dz = new Sortables().addItems($$('.item_dz'));

I would suggest you change the HTML for .item_dz a bit so it would include both the question and the Yes/No element. Something like the exmple under so each block would be inside a item_dz:

<div class="item_dz">
    <textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or] [Was &lt;? echo $all_pla;?&gt; excused from having to do all, or substantially all, of the significant things that the contract required &lt;? echo "[him/her/it]";?&gt; to do?</textarea>   
    <span class="delete"><button>Delete Line</button></span>
        <input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;" />Yes
        <input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No<span class="delete" style="opacity: 0.7;" />
        <button>Delete Line</button>
    </span>
</div>

To get all the elements after you are done dropping/sorting you can do

var questions = document.getElements('.item_dz');
// or to get just the ID's: 
// var questions = document.getElements('.item_dz').map(function(el){ return el.get('id'); });

or use the .serialize() method: http://mootools.net/docs/more/Drag/Sortables#Sortables:serialize