2

Does anyone know how to get this jquery sortable example to work accross different panes? ... meaning each sortable list is in a different pane. I can't drag across the pane. I'm using ui layout for my panes.

Thanks much!

RayLoveless
  • 19,880
  • 21
  • 76
  • 94
  • panes you mean browser window ? if not, i think u need to use the 'connectWith' to put both together – Ricardo Binns Aug 31 '11 at 17:06
  • If you look at ui layout you can see that they create different "panes". At lease that is what they call them... I need each list to be in it's separate "pane". – RayLoveless Aug 31 '11 at 17:10

3 Answers3

3

Just got it! Wow, pretty tricky.

my js:

$(document).ready(function () {
$('body').layout({ applyDefaultStyles: true });

$("#sortable1").sortable({
    helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show();},
    connectWith: ".connectedSortable",
    receive: function (e, ui) { alert("sort 1 recieved an item... update Database.") }
}).disableSelection();

$("#sortable2").sortable({
    helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show(); },
    connectWith: ".connectedSortable",
    receive: function (e, ui) { alert("sort 2 recieved an item... update Database.") }
}).disableSelection();

$("#sortable3").sortable({
    helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show(); },
    connectWith: ".connectedSortable",
    receive: function (e, ui) { alert("sort 3 recieved an item... update Database.") }
}).disableSelection();

});

HTML:

    <BODY>
<DIV class="ui-layout-center">
    <div>
        <div class="casted-and-potential-content">
            <div class="casted-content content" style="">
                <div><b>Casted Talent for Role</b></div>
                <ul id="sortable1" class="connectedSortable">
                    <li class="ui-state-default11 bob">Item 1</li>
                    <li class="ui-state-default12">Item 2</li>
                    <li class="ui-state-default13">Item 3</li>
                    <li class="ui-state-default14">Item 4</li>
                    <li class="ui-state-default15">Item 5</li>
                </ul>
            </div>
            <div class="potential-content content" style="">
                <div><b>Potential Talent for Role</b></div>
                <ul id="sortable2" class="connectedSortable">ffff
                    <li class="ui-state-default21">Item 21</li>
                    <li class="ui-state-default22">Item 22</li>
                    <li class="ui-state-default23">Item 23</li>
                    <li class="ui-state-default25">Item 24</li>
                    <li class="ui-state-default26">Item 25</li>
                </ul>
            </div>
        </div>
    </div>
</DIV>
<DIV class="ui-layout-south" style="margin:0px !important;background:none repeat scroll 0 0 #E7E6E2 !important;">
    <div class="rejected-content" style="padding:10px 20px 10px 20px;background:none repeat scroll 0 0 #E7E6E2 !important;">
        <div><b>Rejected Talent for Role</b></div>
            <ul id="sortable3" class="connectedSortable">
                <li class="ui-state-default31">Item 31</li>
                <li class="ui-state-default32">Item 32</li>
                <li class="ui-state-default33">Item 33</li>
                <li class="ui-state-default34">Item 34</li>
                <li class="ui-state-default35">Item 35</li>
            </ul>
    </div>
</DIV>
</BODY>

the Item's z-index and location in the dom needed to be changed.

RayLoveless
  • 19,880
  • 21
  • 76
  • 94
0

I think they work normally toghether.

Look here:

http://jsfiddle.net/trmr9/

Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
  • Yeah this is close but in this example the visual won't drag accross the pane. I just got it though... I'll post. – RayLoveless Aug 31 '11 at 18:06
  • I think you were just missing this: helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show();}, – RayLoveless Aug 31 '11 at 18:14
0

Using the connectWith option for your sortables will get what you want.

$('#firstList').sortable({connectWith : '#otherList'});

on one.

$('#otherList').sortable({connectWith : '#firstList'});

on the other.

It shouldn't make a difference if they're within different containing DIVs.

  • yeah it shouldn't make a difference if they're in different div's... the "pane" was just throwing the visual off. – RayLoveless Aug 31 '11 at 18:14