简体   繁体   中英

jQuery UI: Draggable and Droppable(not firing) within a table and its rows

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:

在此处输入图片说明

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM