Chrome/Fx toggle input view when sorting a draggable element (jQuery)

The attached code allows dragging of elements (jQuery) into a sortable area, where all elements can be sorted manually. This works fine in all browsers but Chrome and Fx, where the the sub-data's view is toggled when rearranging the order.

To reproduce, using the code below: Drag two elements into the box below. Expand the first one. Drag'n'drop it below the second one. EXPECTED result is to keep the field expanded, but it collapses (in Chrome and Fx), but works fine in Safari and Opera.

<!doctype>
<html>
 <head>
  <title>testcase</title>
  <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 ViewInit() {
    var i = 0;

    function makeDataTypesDraggable() {
     $(".draggable").draggable({
      connectToSortable: ".sortable",
      helper: 'clone',

      start: function () {
       $(_public).trigger('dataTypeDragStart');
      },
      stop: function () {
       $(_public).trigger('dataTypeDragStop');
      }
     });
    }

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

      start: function (event, ui) {
       $(this).sortable('refresh');
      },

      receive: function(event, ui) {
       i++;
      },

      stop: function (event, ui) {
       $(_public).trigger('contentGroupSortStop', {event: event, ui: ui});
      }
     });
    }

    function createPropertyForm(elem, container) {
     var $sortorder = $('<input>').attr({
      type: 'hidden',
      'class': 'sortorder'
     }).prependTo(elem);

     var $title = $('<input>').appendTo(container);
    }

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

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

     elements.parent().removeAttr('id');
    }

    function toggleFieldset(object) {
     if (object.css('display') == 'block') {
      object.css('display', 'none');
      object.parent().removeAttr('id');
     } else {
      hideAllElementsPls();
      object.css('display', 'block');
      object.parent().attr('id', 'expanded');
     }
    }

    function handleTheShit(event, ui) {
     var spanId = ui.item.children('span.dt').attr({
      id: 'dt' + i
     });

     var currentId = ui.item.children('span.dt').attr('id');
     var currentNumber = currentId.split("dt");

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

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

      createPropertyForm(ui.item, $formContainer);

      ui.item.append($formContainer);
      ui.item.attr('id', 'expanded');

      /** toggles fieldset view on span onclicks */
      ui.item.children('span').click(function() {
       toggleFieldset(ui.item.children('fieldset'));
      });
     }
    }

    var _public = {
     bind: function(event, data) {
      $(_public).bind(event, data);
     },
     makeDataTypesDraggable: function() {
      makeDataTypesDraggable();
     },
     createSortable: function() {
      createSortable();
     },
     handleTheShit: function(event, data) {
      handleTheShit(event, data);
     }
    };

    return _public;
   }

   $(function() {
    new Application();
   });

   function Application() {
    var viewInit = new ViewInit();

    function bindComponents() {
     viewInit.bind('contentGroupSortStop', handleDataTypeToggling);
     viewInit.makeDataTypesDraggable();
     viewInit.createSortable();
    }

    function handleDataTypeToggling(event, data) {
     viewInit.handleTheShit(event, data.ui);
    }

    bindComponents();
   } 
  </script>

  <style type="text/css">
   .contentGroup { border: 1px solid #3c3c3c }
   ul.droptarget { padding: 10px }
  </style>
 </head>
 <body>
  <p class="draggable"><span class="dt">Singleline text</span></p>

  <form id="dtForm">
   <div id="contentGroup-1" class="contentGroup">
    <ul class="droptarget sortable contentGroupList"></ul>
   </div>
  </form>
 </body>
</html>

ansaurus

tags:

views:

answers:

Chrome/Fx toggle input view when sorting a draggable element (jQuery)

related questions