jQuery Autocomplete с перетаскиваемыми результатами

Question

Я пытаюсь сделать мои результаты jQuery ui автозаполнения перетаскиваемыми. Хотя я уже пробовал несколько способов, он все еще не работает. Мне нужно сопоставить инициализацию каждого перетаскиваемого элемента, поэтому, к сожалению, this мне не пригодится.

Вот мой подход: (Simplified)

_renderItemData : function (ul, item) { 
    return $("<li />") 
    .data("ui-autocomplete-item", item) 
    .append("<a id='SearchResult"+item.number+"'><div style='vertical-align:middle;line-height:25px;font-size:25px;'><img src='" + item.icon + "' style='width:25px;position:relative;top:2.5px;'/><span style=''>" +item.label + "</span></div></a>") 
    .appendTo(ul); 

    $("#SearchResult"+item.number) 
     .draggable({ 
      helper:"clone", 
      stop: function(event, ui) { 
       alert("Dropped"); 
       doSomethingAndPassElementNumber(item.number); 
      } 
     }); 
}, 

Кто-нибудь знает, как я могу достичь своей цели?

Заранее благодарен! Если есть какие-либо вопросы, пожалуйста, спросите, я благодарен за каждое полезное предложение!

Answer 1

Я создал скрипку: http://jsfiddle.net/T2WkF/6/

Heres пример с рабочей Ui автозаполнения + Ui перетаскиваемой функцией элементов списка.

HTML:

<div class="ui-widget"> 
    <label for="tags">Tags:</label> 
    <input id="tags" /> 
</div> 

JQuery:

$(function() { 
    var availableTags = [{ 
     label: "foo", 
     desc: "1", 
     number: "0" 
    }, { 
     label: "foo1", 
     desc: "2", 
     number: "1" 
    }, { 
     label: "foo2", 
     desc: "3", 
     number: "2" 
    }]; 
    $("#tags").autocomplete({ 
     source: availableTags, 
     focus: function (event, ui) { 
      $('li.ui-menu-item a:contains("' + ui.item.value + '")').draggable({ 
       helper: "clone", 
       stop: function (event, ui) { 
        console.log($(this).text()); 
       } 
      }); 
     } 
    }); 
}); 

Это более или менее просто манекен, но ответ на ваш вопрос, мы надеемся.