1

I'm currently using Draggable from jQuery UI to drag selected rows within a table. However, when I'm trying to use Droppable on certain table rows, none of its events fire even though the class ui-droppable is added to those specific rows. Note that the table is created dynamically, but the events I am creating are all made when the table is rendered.

So far this works nicely:

 $(".files") //this is the class of tbody
            .draggable({
                handle: ".selected",
                start: function () {
                    amDragging = true;
                },
                drag: function (evt) {
                    $('.files .template-folder:not(.selected)').addClass('drag-over');
                },
                helper: function (ui) {
                    var endReturn = '<div>';
                    $('.selected').find('.name').each(function (index, element) {
                        endReturn = endReturn + ' ' + $(this).text();
                    });
                    amDragging = true;
                    console.log(amDragging);
                    return endReturn + '</div>';
                },
                cursorAt: {
                    top: -10,
                    left: -10
                },
                scroll: false,
                stop: function (evt) {
                    $('.files .template-folder').removeClass('drag-over');
                }
            });

However this does not trigger:

 $(".files .template-folder").droppable({
           drop: function(event, ui) { 
             console.log("dropped");
           }
 });

Basically, what I am trying to do, is drag the rows with the class .selected onto rows with the class .template-folder and fire an event once thats done. Is there anything going wrong with that code that I am missing, or is there a simple work around it?

I have tried binding dragover on .template-folder but that doesnt fire with Draggable, only with dragged text etc.

This is what the table html looks like:

enter image description here

Any help would be greatly appreciated as I'm really stuck on this.

2
  • 1
    Hi, an image of the HTML is not much helpful since we can't even copy it... try to make a demo in stack snippet or jsfiddle demonstrating the problem so that others can play with it
    – T J
    Oct 19, 2015 at 7:59
  • @T J, hey, I was gonna try recreate the problem when I got home since what goes behind creating the table is massive and runs mostly in PHP. Ill update my question when I do so, thanks!
    – Sanction
    Oct 19, 2015 at 8:12

1 Answer 1

0

If you want to use ui on table elements you should use ui helper:'clone', that will make elements position:absolute

NOTE: default ui-draging is position relative and position relative is not supported for table elements.

Try: activeClass option https://api.jqueryui.com/droppable/#option-activeClass probably it will fix your issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.