Ordinamento e aggiunta di input come Google - Ottieni indicazioni

Question

Sto provando a fare la lista ordinabile dinamica con il link "Aggiungi destinazione" come lo screenshot Google - Get directions qui sotto. Il grosso problema è che negli ID ordinati gli ID di sequenza dovrebbero essere mantenuti e il contenuto modificato dopo il draging. L'input è in grado di trascinare prima di "A" e di ultimo, rimuovere con "x" il campo a destra. Aggiungendo ulteriori waypoint, a giudicare da questo: il tutorial directions-waypoints deve essere visualizzato come array in JavaScript, i waypoint sono sempre al centro "A" e gli ultimi campi, il punto di input "A" sempre nome es. "da", ultimo "obiettivo". Mi piacerebbe fare gli ultimi campi compilando l'autosuggestion dal Google places. Stavo cercando ovunque una soluzione, ma è troppo diversa.

EDIT: ho raccolto tutto, da fonti diverse finiscono ho ottenuto in risultato non abbastanza buona Codice: jsfiddle.net/fasE5/5/

Answer 1

Ecco un esempio di lavoro completo: http://jsfiddle.net/fasE5/19/

Il codice HTML sono venuto con:

<div id="sortable" class="isOnlyTwo"> 
    <div class="destination"> 
     <span class="handle">A</span> 
     <input type="text" name="dest1" value="" /> 
     <a href="#" class="remove_input">&times;</a> 
    </div> 
    <div class="destination"> 
     <span class="handle">B</span> 
     <input type="text" name="dest2" value="" /> 
     <a href="#" class="remove_input">&times;</a> 
    </div> 
</div> 
<a href="#" id="add_input">Add Destination</a> 

E il CSS, per farlo sembrare un po 'più bella:

#add_input 
{ 
    text-decoration:none; 
    color:#15C; 
    margin-left:35px; 
} 
#add_input:hover 
{ 
    text-decoration:underline; 
} 
.placeholder 
{ 
    border:2px dashed #bfbfbf; 
    margin:5px; 
    width:240px; 
} 
.handle 
{ 
    background-color:#06B500; 
    border:2px solid #3D7311; 
    cursor:n-resize; 
    padding:0 3px; 
    border-radius:99px; 
    font-size:12px; 
} 
.destination 
{ 
    margin:5px 15px; 
} 
.destination input 
{ 
    border:1px solid #B9B9B9; 
    width:200px; 
} 
#sortable.isOnlyTwo .remove_input 
{ 
    display:none; 
} 
.remove_input 
{ 
    color:#999; 
    text-decoration:none; 
    font-weight:bold; 
} 
.remove_input:hover 
{ 
    color:#666; 
} 
.destination.ui-sortable-helper 
{ 
    opacity:0.8; 
    filter:alpha(opacity=80); 
} 
.destination.ui-sortable-helper .remove_input 
{ 
    display:none; 
} 

Per mantenere il giusto ordine di s' name attributo e le lettere di ordine (A, B, C ...), si chiamano al inputRecalculateOrder per l'aggiornamento delle ordinazioni e per la rimozione di una destinazione.

Per evitare di rimuovere le ultime 2 destinazioni, aggiungiamo una classe isOnlyTwo al div #sortable quando rimangono solo 2 destinaitoni. Che grazie al nostro CSS nasconde lo remove_input.

Per il completamento automatico abbiamo bisogno GoogleMaps API

<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script> 

che ci fornisce un new google.maps.places.Autocomplete(input) per aggiungere la funzionalità di completamento automatico di Google.

$(function(){ 
    $("#sortable").sortable({ 
     containment: "document", 
     placeholder: 'placeholder', 
     handle: ".handle", 
     axis: "y", 
     update: RecalculateOrder, 
     forcePlaceholderSize: true 
    }); 

    $("#add_input").click(function() { 
     var inputIndex = $("#sortable > .destination").length; 

     // Building the new field's HTML 
     var html = '<div class="destination">'; 
     html += '<span class="handle">' + String.fromCharCode(inputIndex + 65) + '</span> '; 
     html += '<input type="text" name="dest' + (inputIndex + 1) + '" value="" /> '; 
     html += '<a href="#" class="remove_input">&times;</a>'; 
     html += '</div>'; 

     var newField = $(html); 
     newField .find(".remove_input").click(RemoveInput); 
     $("#sortable").append(newField).removeClass("isOnlyTwo"); 

     // Adding autocomplete to the new field 
     BindAutoComplete(newField.find("input")[0]); 

     return false; 
    }); 

    $(".remove_input").click(RemoveInput); 

    // Adding autocomplete to the first two fields 
    $("#sortable input").each(function(){ 
     BindAutoComplete(this); 
    }); 

    function RemoveInput() 
    { 
     $(this).parent().remove(); 
     RecalculateOrder(); 
     var isOnlyTwo = $("#sortable > .destination").length == 2; 
     $("#sortable").toggleClass("isOnlyTwo", isOnlyTwo); 
     return false; 
    } 

    // Recalculating from scratch the fields order 
    function RecalculateOrder() 
    { 
     $("#sortable .handle").text(function(i) { 
      return String.fromCharCode(i + 65); 
     }); 

     $("#sortable input").attr("name", function(i){ 
      return "dest" + (i + 1); 
     }); 
    } 

    function BindAutoComplete(input) 
    { 
     var autocomplete = new google.maps.places.Autocomplete(input); 
    } 
});