CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Maarten de Graaf
Maarten de Graaf

Reputation: 516

jQuery UI Sortable containment unable to detect placeholder

So I was working on this application where I want people to be able to drag items from one table data to the other table data, which must be contained within the parent table row.

But whenever I drag it around it seems to stick to the containment excluding the height of any placeholders.

Try it yourself: http://jsfiddle.net/2wy8R/

Any idea of how I can make it select the parent of the parent? Of not, then, how can I make the placeholders count?

Greetings

.

Update: YouTube video of the problem http://youtu.be/PMXcQvJmRGw

Upvotes: 3

Views: 1317

Answers (1)

TimCodes.NET
TimCodes.NET

Reputation: 4699

OK, here you go. Overridden the default containment as it seems buggy with your scenario. Let me know if this is not a good idea but it seems to work:

http://jsfiddle.net/2wy8R/6/

$('#first, #second').sortable({
    connectWith: '.sortable',
    placeholder: 'placeholder',
    start: function(event, ui) {
        ui.placeholder.height(ui.item.height() - 4);
        var p = $(ui.helper);
        var tr = p.closest("tr");
        $(document).mousemove(function(e) {
            var pOffset = p.offset();
            var trOffset = tr.offset();
            if (pOffset.left < trOffset.left) {
                p.css({left: trOffset.left});   
            }
            if (pOffset.left + p.width() > trOffset.left + tr.width()) {
                p.css({left: trOffset.left + tr.width() - p.width()});   
            }
            if (pOffset.top < trOffset.top) {
                p.css({top: trOffset.top});   
            }
            if (pOffset.top + p.height() > trOffset.top + tr.height()) {
                p.css({top: trOffset.top + tr.height() - p.height()});   
            }
        });
    }
}).disableSelection();

just be careful with it though, as this keeps adding mousemove events to the document. you may want to unbind mousemove before binding it...

Upvotes: 3

Related Questions