0

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!

Community
  • 1
  • 1
Marc Becker
  • 523
  • 2
  • 7
  • 18

1 Answers1

1

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.

ggzone
  • 3,661
  • 8
  • 36
  • 59
  • Thanks for ur replay! It's almost working the way I want to, but not entirely yet. `//here it alerts the value alert(ui.item.value); //but inside the stop function i get: "Uncaught TypeError: Cannot read property 'value' of undefined " $('li.ui-menu-item a:contains("'+ui.item.value+'")').draggable({helper:"clone", stop: function( event, ui ) {alert(ui.item.value);}});` – Marc Becker Jan 29 '14 at 16:50
  • keep the fiddle updated with your code please and send the link in the commtent, so its easier for us to help you with further problems. – ggzone Jan 29 '14 at 16:53
  • Wow, u are good man! I'll definitely except your answer if you can tell me how I can access label, desc and number at the same time, so output them when dragging stops! – Marc Becker Jan 29 '14 at 17:21
  • .draggable({...}).attr('data-label', ui.item.label); and inside the stop-callback: console.log($(this).attr('data-label')); – ggzone Jan 29 '14 at 17:29
  • Thanks a lot! I have now everything I need! – Marc Becker Jan 29 '14 at 17:46