Question

我正在尝试使我的jQuery ui自动完成结果可拖动。虽然我已经尝试了几种方法但它仍然无法正常工作。我需要对每个可拖动元素的初始化进行共同化，所以不幸的是this对我没用。

以下是我的方法:(简化）

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

下面是一个使用列表项的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());
                 }
             });
         }
     });
 });

这或多或少只是一个假人，但希望能回答你的问题。

jQuery自动完成，具有可拖动的结果

1 个答案: