0

I have a sortable list and some draggable elements, which I created with jquery-ui. I want to drag the draggable elements into the sortable list, so the are added in the last. I have used the "connectToSortable" option but nothing is happening when I drag the element over the sortable list.. Are there some kind of restrictions?

The draggable element are the "td" of a table and the sortable elements are the "li" of a list.

manosagent
  • 614
  • 8
  • 18
  • give your code or create a fiddle – Saif May 26 '15 at 07:59
  • I used [this](http://stackoverflow.com/questions/11146470/ember-js-draggable-and-droppable-jqueryui-native-drag-and-drop-mixin) answer to set up the draggable and sortable ( I write in ember.js ). Everything works fine, except the "connectToSortable" option... – manosagent May 27 '15 at 11:24

1 Answers1

0

Check this DEMO out : http://jsfiddle.net/yeyene/7fEQs/203/

I tried using draggable element are the "td" of a table and the sortable elements are the "li" of a list.

JQUERY

$(function() {
    $( "#draggable td" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    
    $( "#sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('td').each(function() {
                html.push('<li>'+$(this).html()+'</li>');
            });
            $(this).find('td').replaceWith(html.join(''));
        }
    });
});
Community
  • 1
  • 1
yeyene
  • 7,297
  • 1
  • 21
  • 29
  • Yes, that's what I did initially and it did not work. Jquery and qjurey-ui are loaded and the classes/ids have no typos – manosagent May 27 '15 at 12:24
  • In my demo, the code view is showing...
    Value 1
    Value 2
    Value 3
    • Value 2
    • Value 3
    You are not getting this? Pls show us your html code.     – yeyene May 29 '15 at 07:31