Sắp xếp và thêm các yếu tố đầu vào như Google - Tìm chỉ đường

Question

Tôi đang cố gắng tạo danh sách có thể sắp xếp động với liên kết "Thêm điểm đến" chẳng hạn như Google - Get directions ảnh chụp màn hình bên dưới. Vấn đề lớn là trong đầu vào sắp xếp các ID chuỗi cần được duy trì và nội dung thay đổi sau khi kéo. Đầu vào có thể kéo trước "A" và cuối cùng, xóa theo trường "x" bên phải. Thêm các điểm tham chiếu bổ sung, đánh giá bằng cách này: directions-waypoints hướng dẫn sẽ nhận được dưới dạng mảng trong JavaScript, các điểm tham chiếu luôn ở giữa "A" và các trường cuối cùng, điểm đầu vào "A" luôn là tên ví dụ. "từ", "mục tiêu" cuối cùng. Tôi muốn thực hiện các trường sau điền bằng tự động đề xuất từ ​​Google places. Tôi đã tìm kiếm ở khắp mọi nơi cho một số giải pháp nhưng nó là quá khác nhau.

EDIT: tôi thu thập được tất cả mọi thứ từ các nguồn khác nhau kết thúc tôi có trong kết quả mã không khá tốt: jsfiddle.net/fasE5/5/

Answer 1

Dưới đây là một ví dụ làm việc hoàn chỉnh: http://jsfiddle.net/fasE5/19/

HTML Tôi đến lên với:

<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> 

Và CSS, để làm cho nó trông một chút khá hơn:

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

Để giữ trật tự bên phải của 's name thuộc tính và các chữ cái theo thứ tự (A, B, C ...), chúng ta gọi là để inputRecalculateOrder về cập nhật sắp xếp và khi xóa điểm đến.

Để tránh xóa 2 điểm đến cuối cùng, chúng tôi thêm một lớp isOnlyTwo vào số #sortable div khi chỉ còn lại 2 destinaitons. Mà nhờ CSS của chúng tôi giấu các remove_input.

Đối với autocomplete chúng ta cần GoogleMaps API

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

nào cho chúng ta một new google.maps.places.Autocomplete(input) để thêm chức năng autocomplete của 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); 
    } 
});