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.