Jquery arrastar arrumar o valor oculto do formulário inserir no php mysql

Estou tentando criar um formulário a partir do código a seguir, mas não tendo nenhum sucesso. Eu quero inserir campos ocultos para capturar um valor de 1 quando eu coloco um dos itens arrastáveis ​​no campo “Most Like Me”, um valor de 2 quando o item arrastável está no “2º mais como eu”, 3 para ” 3rd Most Like Me “, e 4 para” Least Like Me “. A amostra pode ser visualizada clicando aqui. Como eu criaria isso usando o seguinte código? Uso PHP e MySQL como referência para adicionar ao database.

    Untitled Document  /* Add some margin to the page and set a default font and colour */ body {margin: 30px;font-family: "Georgia", serif;line-height: 1.8em;color: #333;} /* Give headings their own font */ h1, h2, h3, h4 { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } /* Main content area */ #content { margin: 80px 70px; text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; } /* Header/footer boxes */ .wideBox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333; } .wideBox h1 { font-weight: bold; margin: 20px; color: #666; font-size: 1.5em; } /* Slots for final card positions */ #cardSlots { margin: 50px auto 0 auto; background: #ddf; } /* The initial pile of unsorted cards */ #cardPile { margin: 0 auto; background: #ffd; } #cardSlots, #cardPile { width: 910px; height: 120px; padding: 20px; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); box-shadow: 0 0 .3em rgba(0, 0, 0, .8); } /* Individual cards and slots */ #cardSlots div, #cardPile div { float: left; width: 150px; height: 78px; padding: 10px; padding-top: 40px; padding-bottom: 0; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 0 0 0 10px; background: #fff; } #cardSlots div:first-child, #cardPile div:first-child { margin-left: 0; } #cardSlots div.hovered { background: #aaa; } #cardSlots div { border-style: dashed; } #cardPile div { background: #666; color: #fff; font-size: 20px; text-shadow: 0 0 3px #000; } #cardPile div.ui-draggable-dragging { -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); }     // JavaScript will go here $( init ); function init() { // Create the pile of shuffled cards { $('#cardPile div').draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true } ); } // Create the card slots { $('#cardSlots div').droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } function handleCardDrop( event, ui ) { var slotNumber = $(this); var cardNumber = ui.draggable; if ( cardNumber == cardNumber ) { ui.draggable.addClass ( 'correct' ); ui.draggable.draggable ( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); } } }    
Controlling
Motivating
Realistic
Organized
Most Like Me
2nd Most Like Me
3rd Most Like Me
Least Like Me

Eu modifiquei sua function:

 function handleCardDrop( event, ui ) { var slotNumber = $(this); var cardNumber = ui.draggable; var choice = cardNumber.html(); var aux = 0; if (choice == 'Controlling') { aux = 1; } if (choice == 'Motivating') { aux = 2; } if (choice == 'Realistic') { aux = 3; } if (choice == 'Organized') { aux = 4; } var droped= slotNumber.html(); if(droped == 'Most Like Me') { $("#uno").val(aux); } if(droped == '2nd Most Like Me') { $("#dos").val(aux); } if(droped == '3rd Most Like Me') { $("#tres").val(aux); } if(droped == 'Least Like Me') { $("#cuatro").val(aux); } if ( cardNumber == cardNumber ) { ui.draggable.addClass ( 'correct' ); ui.draggable.draggable ( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); } } 

—————— UPDATE 2.0 —————————

Acabei de adicionar a parte ajax e modificou o violão:

  $("#saveResult").click(function(){ var uno = $("#uno").val(); var dos = $("#dos").val(); var tres = $("#tres").val(); var cuatro = $("#cuatro").val(); var params = { "uno" : uno, "dos" : dos, "tres" : tres, "cuatro": cuatro }; $.ajax( { type: "POST", url: 'myphpfile.php', data: params, success: function( response ) { $("#result").html(response); } } ); }); 

No arquivo myphpfile.php:

 < ?php $uno = $_POST['uno']; $dos = $_POST['dos']; $tres = $_POST['tres']; $cuatro = $_POST['cuatro']; //Here the code to insert in your database ?> 

Violão de trabalho ATUALIZADO: http://jsfiddle.net/robertrozas/qLhke/25/