0

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

这是我的方法：（简化）

_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);
            }
        });
},

有人知道我怎样才能实现我的目标吗？

提前致谢！如果有任何问题，请提出，我很感激每一个有用的建议！

4

1 回答 1

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());
                 }
             });
         }
     });
 });

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

于 2014-01-29T16:35:02.740 回答