Search code examples
javascriptjqueryjquery-uijquery-ui-sortabledroppable

jQuery UI only center of dragged element activates draggable trash

I am using "sortable" list and "droppable" trash. The problem is dragged element activate that trash only on the center. How can I spread that "activation area" to all the element? enter image description here

enter image description here

And this is my jquery I used to do it:

$(".barbox").sortable({
    connectWith: '.connectedTrash, #droptaskdelete'
}).disableSelection();

$(".barbox").sortable({
    connectWith: '.connectedTrash, #droptaskdelete'
}).disableSelection();

$("#droptaskdelete").droppable({
    accept: ".connectedTrash .bar",
    hoverClass: "trash-active",
    drop: function(ev, ui) {
        ui.draggable.remove();
    }
});

Trash is working, the problem is with that "activation area". I want all dragged element to activate that trash.

Please for help.

Solution

  • Look at the API for the tolerance option: https://api.jqueryui.com/droppable/#option-tolerance