Question

There are 2 tags whose positions I exchange if the Top is dragged and covers more than half the bottom . Initially, both theses are draggable. However, to exchange the positions, I exchange their innerHTML, and once this is done, both of them are no longer draggable. I’m fairly new to jQuery and any suggestions would be appreciated.

Heres, the code

Here’s part of the html

<div id="wrapper">
  <table id="panelTable" cellpadding="0" cellspacing="0">
      <tr id="panel_top_tr">
         <td id="panel_top_td" class="draggable">
            <div id="panel_top" class="panel">Panel Top</div>
         </td>
      </tr>
      <tr id="sep_tr">
         <td class="separator_horizontal"></td>
      </tr>
      <tr id="panel_bottom_tr">
         <td id="panel_bottom_td" class="draggable">
            <div id="panel_bottom" class="panel">Panel Bottom</div>
         </td>
      </tr>
  </table>
</div>

Theres is a bunch of html above and below this fragment, but you get the gist ..

Heres the jQuery code

$(function () {

        $_dropEnd = null;

        $(".draggable").draggable({
            axis: 'y',
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true',

            //store initial innerHTML values before dragging starts
            start: function () {
                table = document.getElementById("panelTable");
                row1 = document.getElementById("panel_top_tr");
                row2 = document.getElementById("sep_tr");
                row3 = document.getElementById("panel_bottom_tr");
                r1html = row1.innerHTML;
                r3html = row3.innerHTML;
            },

            //check position and exchange accordingly
            drag: function (event) {
                var headlineTop = $('#panel_top_td').position().top;
                var headlineHeight = $('#panel_top_td').height();
                var headlineBottom = headlineTop + headlineHeight;
                var headlineCenter = headlineTop + (headlineHeight / 2);

                var storyTop = $('#panel_bottom_td').position().top;
                var storyHeight = $('#panel_bottom_td').height();
                var storyBottom = storyTop + storyHeight;
                var storyCenter = storyTop + (storyHeight / 2);

                if (headlineBottom >= storyCenter) {
                    //Exchange                                               
                    row3.innerHTML = r1html;
                    row1.innerHTML = r3html;
                    isTop = false;
                    $('#panel_bottom_td').draggable('enable');
                    $('#panel_top_td').draggable('enable');
                }
            },
            stop: function (event, ui) {
                $(this).appendTo($_dropEnd);
                $_dropEnd = null;
            }
        });
    });

Answer 1

That’s a lot of code for a very easy task. I suggest you to look at jQuery UI Sortable, does exactly what you want, cross browser, easily configurable.