Question

I'm trying to make my jQuery ui autocomplete results draggable. Although I already tried several ways it is still not working. I need to costimze the initialisation of each draggable element, so unfortunately this is not useful to me.

Here is my approach: (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);
            }
        });
},

Does anybody know how I can achieve my goal?

Thanks in advance! If there are any questions please ask, I'm grateful for every useful advicce!

Was it helpful?

Solution

I set up a fiddle: http://jsfiddle.net/T2WkF/6/

Heres an example with a working ui autocomplete + ui draggable function of the list items.

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

This is more or less just a dummy, but answers your question hopefully.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top