How can I know the draggable item was really dropped in specified sortable container in Jquery UI

Question

All, I knew we can implement a draggable to a element just simply call the .draggable method in jquery ui. here is an example for it including connect to sortable.

$(".draggable").draggable({
            helper : function(){
                   //return something dom.},
            cursor : 'move',
            connectToSortable : '.sortableLayoutSection'});

$(".sortableLayoutSection").sortable({
            appendTo : parent,
            containment : "parent",
            cursor : "pointer",
            placeholder : 'li-placeholder',
            forcePlaceholderSize : false
        });

But my question is how can I known the draggable item really drop into the specified container(in this example is element with class named .sortableLayoutSection)? thanks.

Updated

$(".sortableLayoutSection").sortable({
                appendTo : parent,
                containment : "parent",
                cursor : "pointer",
                placeholder : 'li-placeholder',
                forcePlaceholderSize : false,
                receive: function( event, ui ) {alert('ok.got something.')}
            });

score 1 · Accepted Answer · answered Mar 05 '13 at 06:09

1

first you should init your sortable element as droppable element too, while please refer to this:http://api.jqueryui.com/droppable/#event-drop. it has drop event, it means that there is a drag element has been drag in to droppable. so you can write the function to determine what you want to do.

answered Mar 05 '13 at 06:09

OQJF

1,350
9
12

Hi, OQJF, your answer is good ,I upvote it, but it is not simple enough, please review my answer. thanks. – Joe.wang Mar 05 '13 at 06:35
I've noticed you answer, though didn't test it, I think it can work well. thank you Joe, nice guy, oblivious, it will help lots of guys. – OQJF Mar 05 '13 at 06:37
sorry buddy, I can't join any chat cuz company policy. anyway fun day. – OQJF Mar 05 '13 at 06:52
There are a lot of chinese friends here .So someone build a chat room for us .you can join it. thanks. – Joe.wang Mar 05 '13 at 06:56
that's blocked by our company. – OQJF Mar 05 '13 at 06:57

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

The answer is here, After I test it , It solve my problem, only drop in the specified container will trigger a event named receive,please review my updated content .thanks.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 05 '13 at 06:28

Joe.wang

11,537
25
103
180

How can I know the draggable item was really dropped in specified sortable container in Jquery UI

2 Answers2