Hide list data when starting sorting

The attached code allows list elements to be dragged into a sortable area.

Problem: Add three list elements, expand the first one and move it downwards. Because of fieldset's height (150px), you'll have to move it below its own height to apply the sorting. To fix this I tried adding a class (.hideImBeingDragged) when the sorting starts, but it seems the content won't disappear for the "preview" while dragging. Any ideas how to attack this issue?

<!doctype>
<html>
 <head>
  <title>testcase</title>

  <style type="text/css">
    * { margin: 0; padding: 0; list-style: none }
    body { padding: 100px }
    fieldset { height: 150px; }
    #menu, #column { float: left }
    ul.droptarget { border: 1px solid #999; padding: 20px 10px; width: 350px }
    .ui-state-highlight { background: #f90; padding: 5px; margin: 5px 0; height: 1.3em; opacity: 0.7 }

    .hideImBeingDragged { height: 9px; overflow: hidden }
  </style>

  <script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    function hideAllElementsPls() {
        var elements = $('.dtContent');
        var elementsLength = elements.length;

        for (var j = 0; j < elementsLength; j++) {
            elements[j].style.display = 'none';
        }
    }

    function hideOrShowFieldset(object) {
        if (object.css('display') == 'block') {
            object.css('display', 'none');
        } else {
            hideAllElementsPls();
            object.css('display', 'block');
        }
    }

    $(function () {
        var i = 0;

        $(".draggable").draggable({
            connectToSortable: ".sortable",
            helper: 'clone'
        });

        $(".contentGroupList").sortable({
            connectWith: '.contentGroupList',
            placeholder: 'ui-state-highlight',

            start: function(event, ui) {
                if (ui.item.children('fieldset').css('display') == 'block') {
                    $(ui.item).addClass('hideImBeingDragged');
                }
            },

            stop: function (event, ui) {
                var currentId = ui.item.children(0).attr('id');
                var currentNumber = currentId.split("dt");

                if ((i + 1) == $('.droptarget').children().size()) {
                    hideAllElementsPls();

                    var $formContainer = $('<fieldset>').addClass('dtContent').attr({
                        id: 'fs' + currentNumber[1]
                    });

                    ui.item.append($formContainer);

                    ui.item.attr({
                        id: 'listItem' + i
                    });

                    ui.item.children('span').click(function() {
                        hideOrShowFieldset(ui.item.children('fieldset'));
                    });

                    var elemText = ui.item.find('span').text();
                    i++;
                }
            }
        });
    });
  </script>
 </head>
 <body>
  <div id="column">
   <ul id="draggables">
    <li class="draggable"><span class="dt" id="dt0">Draggable item</span></li>
   </ul>
  </div>
  <div id="data">
      <div id="contentGroups-1" class="contentGroup">
       <ul class="droptarget sortable contentGroupList"></ul>
      </div>
  </div>
 </body>
</html>

ansaurus

tags:

views:

answers:

Hide list data when starting sorting

related questions