javascript - 像 Google 一样排序和添加输入 - 获取路线

Question

我正在尝试使用“添加目标”链接创建动态可排序列表，例如 Google - Get directions下面的截图。大问题是在排序的输入中，序列 ID 应该保持不变，并且内容在拖动后会发生变化。输入能够拖到“A”之前和最后，通过“x”右侧字段删除。添加额外的航路点，由此判断:directions-waypoints教程应该在 JavaScript 中作为数组获取，航路点始终是中间的“A”和最后一个字段，输入点“A”总是名称，例如。 “从”，最后一个“目标”。我想通过来自 Google places 的自动建议来填充后面的字段.我到处都在寻找一些解决方案，但它太不一样了。

编辑: 我从不同来源收集了所有内容，结果我得到的结果不是很好代码:jsfiddle.net/fasE5/5/

Answer 1

这是一个完整的工作示例:http://jsfiddle.net/fasE5/19/

我想出的 HTML:

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

还有 CSS，让它看起来更漂亮:

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

为了保持 input 的 name 属性和顺序字母(A、B、C...)的正确顺序，我们调用 RecalculateOrder 在排序更新和删除目的地时。

为了防止删除最后 2 个目的地，当只剩下 2 个目的地时，我们将 isOnlyTwo 类添加到 #sortable div。感谢我们的 CSS 隐藏了 remove_input。

对于自动完成，我们需要 GoogleMaps API

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

它为我们提供了一个 new google.maps.places.Autocomplete(input) 来添加 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);
    }
});