Geek asks and answers

JQueryUI Sortable - creating two sorters simultaneously

I am using jQuery 1.7 and jQuery UI 1.8 from Google CDN (so I have the latest versions).

I have two elements on my page: a header and a content area with containers that correspond to each element in the header list. I currently have Sortable attached to both, allowing me to change the order of visibility of both the navigation items and the content containers (separately). The behavior I'm trying to achieve is that when I drag a navigation item, the content container moves with it, and when I delete the navigation item at a new position in the list, the content container snaps to its new position in the content area. The website I am working on is an intranet page, so I cannot provide a link, but I have included the following scheme:

Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree

After dragging NavThree between NavOne and NavTwo, the whole layout should look like this:

Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo

, ? , "" ( , ). , , ().

jQuery UI : [LINK]

, , :

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
/* This is my CSS */
/* Basic reset -- outline for debugging */
* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
/* Main styles */
.containerDiv {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 800px;
  height: 600px;
  white-space: nowrap;
  float: left;
}
.itemDiv {
  width: 200px;
  height: 500px;
  display: inline-block;
}
.navBar ul, .navBar li {
  display: inline;
}
</style>
</head>
<body>
<!-- This is my HTML -->
<div class="navBar">
  <ul>
    <li id="nav1">Navigation 1</li>
    <li id="nav2">Navigation 2</li>
    <li id="nav3">Navigation 3</li>
  </ul>
</div>
<div class="containerDiv">
  <div class="itemDiv" id="item1">Item 1</div>
  <div class="itemDiv" id="item2">Item 2</div>
  <div class="itemDiv" id="item3">Item 3</div>
</div>
</body>
<script>
/* This is my JavaScript */
// Make containerDiv children sortable on X-axis
$(".containerDiv").sortable({
  axis: "x"
});
// Make nav children sortable on x-axis
$(".navBar").sortable({
  axis: "x",
  items: "li"
});
// Bind sorting of each (.navBar li) to its corresponding (.containerDiv .itemDiv):
$(".navBar li").bind("mouseup", function(event,ui){
// If I use "sortupdate" I get little to no response. If I use "mouseup",
// I can at least get an alert to return the value of thisId.
// Note: I am sad that console.log is blocked in Firefox,
// because its DOM inspector is better than Chrome's
  // the (.navBar li) have ids of "nav1, nav2" and so on,
  // and the (.containerDiv .itemDiv) have corresponding ids of "item1, item2"
  // which is my way of attempting to make it easier to link them.
  // This line is my attempt to target the (.containerDiv .itemDiv) which directly
  // corresponds to the (.navBar li) which is currently being sorted:
  var tempId = "#" + $(this).attr('id').replace("nav","item");
  // When this (.navBar li) is updated after a sort drag,
  // trigger the "sortupdate" event on the corresponding (.containerDiv .itemDiv):
  $(tempId).trigger("sortupdate");
});
</script>
</html>

, , . , , ( ) .

, :

, , , , ajax , , , ( ).

, StackOverflow... / , , ? ? Sortable, , , .

jsFiddle, , , , , : http://jsfiddle.net/34u7n/1/

+3
2

, , , sortupdate . sortupdate , , , , .

$(".navBar").sortable({
  axis: "x",
  items: "li",
  update: function(event, ui) { onSort(event, ui); }
});

//this should now at least be firing when you move an item 
function onSort(event, ui)
{
    var tempId = $(ui.item).attr('id').replace("nav","item");
    alert(tempId);
}
0

AFAIK JQuery UI Sortable, jQuery .

, , . , / , .

<ul class="MasterList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul class="SecondList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul class="ThirdList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>


$( '.MasterList' ).sortable
({
    start: function( event, ui )
    {
        // Store start order of the sorting element
        ui.item.OrderStart = ui.item.index();
    },
    stop: function( event, ui )
    {
        // Total number of sorting element
        var OrderTotal = $( '#ObjectiveListSortable li' ).length - 1;
        // Store drop order of the sorting element
        ui.item.OrderStop = ui.item.index();

        // Only do the element sync if there is any change of order. If you simply drag and drop the element back to same position then this prevent such cases.
        if ( ui.item.OrderStart != ui.item.OrderStop )
        {
            // Sorting element dropped to top
            if ( ui.item.OrderStop == 0 )
            {
                $( '.SecondList' ).eq( 0 ).before( $( '.SecondList' ).eq( ui.item.OrderStart ) );
                $( '.ThirdList' ).eq( 0 ).before( $( '.ThirdList' ).eq( ui.item.OrderStart ) );
            }
            // Sorting element dragged from top or dropped to bottom
            else if ( ui.item.OrderStart == 0 || ui.item.OrderStop == OrderTotal )
            {
                $( '.SecondList' ).eq( ui.item.OrderStop ).after( $( '.SecondList' ).eq( ui.item.OrderStart ) );
                $( '.ThirdList' ).eq( ui.item.OrderStop ).after( $( '.ThirdList' ).eq( ui.item.OrderStart ) );
            }
            else
            {
                $( '.SecondList' ).eq( ui.item.OrderStop - 1 ).after( $( '.SecondList' ).eq( ui.item.OrderStart ) );
                $( '.ThirdList' ).eq( ui.item.OrderStop - 1 ).after( $( '.ThirdList' ).eq( ui.item.OrderStart ) );
            }
        }
    }
});

$( '.SecondList' ).trigger( 'refresh' ); , .

0

More articles:


All Articles