Ordenando y agregando entradas como Google - Obtener direcciones

Question

Estoy tratando de hacer una lista dinámicamente ordenable con el enlace "Agregar destino", como la captura de pantalla Google - Get directions a continuación. El gran problema es que en las entradas de secuencia ordenada, las ID de secuencia deben mantenerse y el contenido debe cambiarse después del arrastre. La entrada puede arrastrar antes de "A" y, por último, eliminar por "x" el campo derecho. Agregar waypoints adicionales, a juzgar por esto: directions-waypoints tutorial debe obtener como una matriz en JavaScript, waypoints es siempre el centro "A" y los últimos campos, el punto de entrada "A" siempre nombre, por ejemplo. "desde", último "objetivo". Me gustaría hacer los últimos campos rellenando por autosugestión desde Google places. Estaba buscando una solución en todas partes, pero es demasiado diferente.

EDIT: he recogido todo, desde diferentes fuentes terminan llegué en consecuencia no es un buen código: jsfiddle.net/fasE5/5/

Answer 1

Aquí es un ejemplo de trabajo completo: http://jsfiddle.net/fasE5/19/

El HTML Vine hasta 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> 

Y el CSS, para que se vea un poco más bonita:

#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; 
} 

Para mantener el orden correcto de la input 's name atributo y las letras de orden (A, B, C ...), nos llaman a RecalculateOrder en la actualización de clasificación y al eliminar un destino.

Para evitar eliminar los últimos 2 destinos, agregamos una clase isOnlyTwo al #sortable div cuando solo quedan 2 destinaitons. Que gracias a nuestro CSS oculta el remove_input.

Para el autocompletar necesitamos GoogleMaps API

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

Lo que nos proporciona una new google.maps.places.Autocomplete(input) para agregar funcionalidad de autocompletar de 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); 
    } 
});