Opened 9 years ago

Closed 7 years ago

#6240 closed bug (invalid)

Sortable placeholder when dragging a connected element

Reported by: avsomeren Owned by: avsomeren
Priority: minor Milestone: 2.0.0
Component: ui.sortable Version: 1.8.4
Keywords: sortable draggable placeholder Cc:
Blocked by: Blocking:

Description

I am facing an issue with combining draggable and sortable.

The problem has to do with a placeholder not showing when a draggable is moved over the sortable (#SortablePhotoList) the drop is not "recognized". This behaviour occurs when the sortable ul element doesn't have a height defined in css.

When i do define a height in css for the #SortablePhotoList, the placeholder is visible and everything works as expected.

The important css :

#SortablePhotoList { list-style-type: none; margin: 2px; padding: 0px; width: 858px; /* height:200px; */ }
.Thumbnail { cursor: hand; width: 136px; height: 102px; float: left; margin: 0 5px 5px 0; position: relative; border: 1px #717171 solid; }
.ThumbnailPlaceholder { width: 136px; height: 102px; float: left; margin: 0 5px 5px 0; border: 1px #000 dotted; }

The important javascript :

 $("#SortablePhotoList").sortable({
        revert: true,

        placeholder: 'ThumbnailPlaceholder',
        tolerance: 'pointer',
        revert: 50,
        distance: 5,
        items: 'li:not(.Upload)',
        stop: function (event, ui) {
            //Do stuff with the sorted thumbnail
        },
        receive: function (event, ui) {
            //Accept the dragged item and change it's appearance a bit
            var item = $('#SortablePhotoList li.NewlyAdded');
            $(".ImageRemove", item).show();
            $(".PhotoSelector", item).show();
            item.removeClass('NewlyAdded');
        }
    });

Ragards, avsomeren

Change History (3)

comment:1 Changed 7 years ago by Scott González

Milestone: TBD2.0.0

comment:2 Changed 7 years ago by mikesherov

Owner: set to avsomeren
Status: newpending

Thanks for taking the time to contribute to the jQuery UI project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket. In this case, we don't know the HTML you were using when you encountered this issue!

Additionally, be sure to test against the git version of both jQuery UI and jQuery to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/ZgAqH/ Open the link and click to "Fork" (in the top menu) to get started.

comment:3 Changed 7 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Note: See TracTickets for help on using tickets.